aria-errormessage需与同DOM树中带对应id的错误容器手动配合使用，且应与aria-invalid="true"成对出现；错误容器须视觉隐藏但保持可访问性，避免语义冲突标签，并注意浏览器兼容性及Shadow DOM限制。
怎么用 aria-errormessage 关联错误文本容器
它不是自动生效的“绑定”，而是靠两个手动配合：一个带 aria-errormessage 的表单控件，和一个带 id 的错误提示元素。屏幕阅读器只在两者 ID 匹配且控件获得焦点时读出错误内容。
-
aria-errormessage的值必须是另一个元素的id字符串，不能是 class 或任意文本 - 错误容器本身不需要加
role="alert"，但加了更稳妥（尤其在旧版 NVDA 中） - 错误容器建议用
<div>或<span>，避免用<label>或<legend>—— 语义冲突会导致读屏跳过或重复 - 错误文本得是实时可访问的：不能靠
display: none隐藏，得用aria-hidden="true"+hidden或visibility: hidden+position: absolute等组合来视觉隐藏但保留可访问性
aria-invalid 和 aria-errormessage 必须一起用吗
不是必须，但分开用效果打折。aria-invalid="true" 是告诉辅助技术“这字段有问题”，aria-errormessage 是告诉它“问题具体是什么”。没前者，后者常被忽略；没后者，用户只知道“错”，不知道“哪错”。
- 若只设
aria-errormessage但不设aria-invalid，JAWS 和 VoiceOver 大概率不读错误消息 - 若只设
aria-invalid="true"，部分读屏会读“invalid”，但不会主动拉取关联的错误文本 - 推荐始终成对出现：
aria-invalid="true"+aria-errormessage="error-id-123"
错误容器显示/隐藏时要注意什么
动态切换错误提示时，不能只靠 CSS 控制显隐，否则读屏感知不到变化。关键是要让错误容器在显示时可访问、在隐藏时彻底退出可访问树。
- 显示时：
id必须存在，且aria-hidden="false"（默认即可），内容非空 - 隐藏时：别只用
display: none—— 这会让读屏完全忽略该元素，即使之后再显示，也不会触发 announcement - 正确做法是同时移除
id（或改掉），或用aria-hidden="true"+hidden属性，或用visibility: hidden+position: absolute+left: -9999px - 如果用 JS 切换，建议在显示后调用
element.setAttribute('aria-live', 'assertive')（仅对容器本身），确保读屏立刻播报
Chrome / Firefox 对 aria-errormessage 的支持差异
支持度比想象中低：Chrome 110+ 才开始稳定支持，Firefox 直到 120+ 才修复多个关联 bug。旧版本下，即使写对了，也可能完全不读。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必用最新稳定版 Chrome + NVDA（Windows）或 Safari + VoiceOver（macOS），旧组合大概率失效
- 不要依赖
aria-errormessage做唯一错误传达方式 —— 同时保留视觉错误文案 +role="alert"容器作为降级方案 - 服务端渲染页面里，如果错误容器初始就存在且
id已匹配，Chrome 115+ 可以在首次聚焦时读出；但 JS 动态插入的容器，需确保插入 DOM 后再设置控件的aria-errormessage
最易被忽略的一点：ID 匹配必须发生在同一 DOM 树层级，Shadow DOM 内部的 aria-errormessage 指向外部 ID，或反之，基本无效。跨 Shadow Boundary 的错误提示，得换别的方案，比如自定义事件 + aria-live。
