aria-describedby 用于关联说明文字与表单控件，提升可访问性；需用唯一、语义化 ID 引用独立 HTML 元素，支持多 ID 空格分隔，不可替代 label，内容须简洁明确，并通过屏幕阅读器真实测试验证。
用 aria-describedby 可以把一段说明文字和表单控件关联起来，让屏幕阅读器在读取控件时自动朗读说明，特别适合解释格式要求、限制条件或业务规则等复杂内容。
确保说明文字有唯一 ID
被引用的说明文本必须是一个独立的 HTML 元素（如 <div>、<p> 或 <span>），且带有明确的 id。这个 id 将作为 aria-describedby 的值。
- 避免多个元素共用同一个
id，否则屏幕阅读器可能只读第一个或行为不可预测 - ID 值应语义清晰，比如
email-hint比hint1更易维护 - 说明文字可以放在控件上方、下方或旁边，位置不影响功能，但建议靠近控件提升视觉可理解性
在表单控件上设置 aria-describedby
将控件的 aria-describedby 属性值设为说明元素的 id。支持多个 ID，用空格分隔，适用于同时需要提示 + 错误消息 + 格式示例的场景。
- 例如：
<input aria-describedby="password-hint password-strength"> - 如果说明文本是动态插入的，记得同步设置 ID 并确保 DOM 已就绪后再绑定属性
- 不要用
aria-describedby替代label—— 它补充说明，不替代标签的必选语义
让说明内容本身更友好
屏幕阅读器会逐字朗读 aria-describedby 所指向的内容，所以文字需简洁、具体、无歧义。
- 避免模糊表述，如“请按要求填写” → 改为“密码需包含至少 1 个大写字母、1 个小写字母和 1 个数字”
- 慎用缩写或行话；如必须使用，首次出现时给出全称，例如“增值税（VAT）”
- 若含链接、按钮等交互元素，确保它们也具备可访问性（如
role="link"、tabindex="0"、键盘可用）
测试与常见误区
仅写对代码不等于体验到位，真实环境验证很关键。
- 用 NVDA + Firefox 或 VoiceOver + Safari 测试：聚焦输入框，听是否完整读出说明
- 避免把长段落塞进一个
aria-describedby——超过 2–3 句可能信息过载，可拆成多个 ID 分别引用 - 不要把错误消息也硬塞进同一个说明元素里；错误应由
aria-invalid和aria-errormessage管理，保持职责分离
