aria-describedby 必须用唯一 id 双向绑定 input 与错误元素，id 值需严格一致；错误元素应设 role="alert" 或 aria-live="polite"，并置于 input 后紧邻位置以确保读屏器正确播报。
aria-describedby 怎么让错误消息和 input 关联上
必须用 id 值双向绑定：input 的 aria-describedby 属性值，要严格等于错误元素的 id。不是 class、不是 name、不是 data-*，只能是那个唯一、可被引用的 id。
常见错误现象：屏幕阅读器读不出错误，或者读了别的内容——大概率是 aria-describedby 指向的 id 不存在、拼错、重复，或目标元素不可访问（比如 display: none 但没加 aria-hidden="true"）。
-
aria-describedby可以指向多个id，用空格分隔，例如aria-describedby="error-1 error-2" - 错误元素本身建议用
role="alert"或aria-live="polite"，否则动态插入时可能不触发播报 - 不要把错误文本塞进
title或placeholder——它们不被所有读屏器当作错误信息处理
为什么不能只靠 class 或 data-error-id
因为 aria-describedby 是 ARIA 规范强制要求的 IDREF 类型属性，浏览器和辅助技术只认真实存在的 id 值。class 是样式钩子，data- 是开发者自定义存储，两者都不参与可访问性树的关联逻辑。
使用场景：表单验证失败后 JS 动态插入错误提示，此时必须确保新插入的 <div> 有合法 <code>id，且 input 同步更新 aria-describedby 值。
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时，如果错误已存在，直接写死
id和aria-describedby即可 - 客户端校验时，避免用随机字符串生成
id（如uuid()），容易漏清理；推荐用稳定标识，如error-${fieldName} - React/Vue 等框架中，注意
id不能在列表项里重复——每个 input + 错误组合必须有唯一 ID 对
input 失去焦点后错误不读？检查 aria-live 和 DOM 顺序
很多情况下，错误是 JS 插入的，但插入位置不对或缺少实时播报机制，导致读屏器“看不见”变化。单纯设 aria-describedby 不足以触发主动播报，它只建立静态关系。
性能 / 兼容性影响：过度使用 aria-live="assertive" 会打断用户操作流；而 aria-live="polite" 在某些旧版 NVDA + Firefox 组合下响应延迟明显。
- 错误容器建议放在
input后紧邻位置（DOM 顺序靠近），有助于非读屏用户视觉定位 - 插入错误时，优先用
aria-live="polite"+role="status"包裹文本，比纯靠aria-describedby更可靠 - 不要给错误元素设
visibility: hidden或opacity: 0——它们仍存在于可访问性树中，但视觉隐藏易造成认知断层
Chrome DevTools 里怎么快速验证关联是否生效
打开开发者工具 → 切到「Accessibility」标签页 → 点击 input 元素 → 查看右侧「Properties」下的 describedby 字段是否列出对应 ID，以及该 ID 是否解析为有效节点。
容易踩的坑：DevTools 有时缓存旧属性值，修改后需手动右键元素 → 「Reveal in Accessibility Tree」刷新；另外，若错误元素父级有 aria-hidden="true"，即使 ID 正确，也会被整块忽略。
- 命令行快速检查：
getComputedAccessibleName(document.querySelector('input'))—— 它会合并aria-label、label、aria-describedby内容，可用于验证是否真被读取 - 移动端 Safari 对
aria-describedby支持较弱，必要时得降级用aria-labelledby+ 隐藏label - 别依赖「控制台输出无障碍信息」这类插件——它们模拟不全，最终以实际读屏器（NVDA、VoiceOver）测试为准
最麻烦的其实是多语言切换时 ID 同步更新，还有表单重置后忘记清空 aria-describedby —— 这类状态残留问题，往往要等用户真遇到障碍才暴露出来。
