aria-describedby 通过 id 显式绑定 dom 中可见的描述元素，要求 id 唯一、元素未被 display: none 或 aria-hidden 隐藏；多 id 空格分隔，按 dom 顺序朗读；须与 label 职责分离，不可替代；动态更新需同步修改 aria-describedby 值。
aria-describedby 的基本用法和关联原理
aria-describedby 不是让屏幕阅读器“读出旁边的文字”，而是通过 ID 引用显式绑定描述性文本节点。它要求被引用的元素必须存在于 DOM 中、有唯一 id，且不能被 display: none 或 aria-hidden="true" 隐藏（visibility: hidden 和 opacity: 0 可以）。
常见错误是把提示文字写在 <label></label> 里却还额外加 aria-describedby，导致重复朗读；或者 ID 拼错、大小写不一致，关联直接失效。
- 表单控件（如
<input>、<select></select>）需设置aria-describedby="id1 id2"，多个 ID 用空格分隔 - 被引用的描述元素建议用
<div> 或 <code><p></p>，避免用<span></span>（语义弱，部分旧版读屏可能忽略） - 描述文本应简短明确，比如“密码需包含大小写字母和数字”而非“请按以下规则设置安全密码”
- 不要给
<label></label>设置id后让控件指向它：控件需要自己的id，label通过for关联这个id - 如果描述文本需视觉隐藏但供读屏使用，用
class="sr-only"（配合 clip-path 或 position: absolute）而非display: none - 动态渲染场景中，确保描述元素在控件渲染完成后再挂载，否则 ID 查找失败
- 推荐为每类描述分配固定 ID 前缀，例如
desc-email-format、desc-email-error - JavaScript 更新时，用
element.setAttribute('aria-describedby', 'desc-email-format desc-email-error')全量重设，避免残留无效 ID - 若某段描述暂时不适用（如无错误时），直接从
aria-describedby值中剔除对应 ID，不要留空字符串或占位符 - 测试必须用真实读屏工具，不能依赖浏览器控制台检查属性是否存在
- 重点验证：控件获得焦点时，是否准确、完整、按序朗读所有关联描述
- 避免在描述文本中放链接、按钮等交互元素——读屏会将其作为可操作项暴露，但键盘焦点无法到达
- 如果描述含 Unicode 符号（如 ✅ ❌），确认字体支持，否则可能朗读为“未知字符”或静音
与 label 元素共存时的注意事项
当控件已有 <label for="xxx"></label> 时，aria-describedby 补充的是「非必填但影响理解」的信息，比如格式示例、限制说明、错误恢复提示。两者职责不同：label 定义控件身份，aria-describedby 提供上下文。
典型误用：用 aria-describedby 替代 label —— 这会让无 CSS 场景下完全不可见，也绕过浏览器原生表单校验逻辑。
多段描述或动态更新的处理方式
aria-describedby 支持空格分隔多个 ID，适合将“格式要求”“错误提示”“示例”拆成独立元素分别管理。但要注意：所有被引用元素的内容会按 DOM 顺序拼接朗读，顺序错了会影响理解逻辑。
动态更新（如输入后显示实时验证提示）时，不能只改描述文本内容，必须同步更新对应元素的 id 引用关系，或确保旧 ID 已从 aria-describedby 值中移除。
兼容性与测试要点
现代 Chrome + NVDA、Safari + VoiceOver、Edge + Narrator 均支持 aria-describedby，但旧版 JAWS（2018 以前）对多 ID 或嵌套结构支持不稳定。真正容易被忽略的是「视觉焦点移动时是否触发重新朗读」——多数读屏只在初始聚焦或 tab 进入时读一次，不会监听描述内容变化。
