aria-errormessage 必须指向真实存在的ID元素，且需与aria-invalid="true"配合使用；错误提示元素应预置在DOM中、设role="alert"、用sr-only隐藏而非display:none，并确保文案具体可操作。
aria-errormessage 必须指向一个真实存在的 id 元素
它不是直接放错误文案的容器，而是通过 ID 引用另一个元素——这个被引用的元素必须已经存在于 DOM 中、有唯一 id、且不能被 display: none 或 aria-hidden="true" 隐藏。常见失败：JS 动态创建错误提示后没挂载就设 aria-errormessage，结果屏幕阅读器完全静默。
正确做法是服务端或初始 HTML 就预置空容器：
<input id="phone" aria-invalid="false" aria-errormessage="phone-error"> <div id="phone-error" class="sr-only" role="alert"></div>
后续 JS 只更新 textContent，不删重建元素。
aria-errormessage 和 aria-invalid 必须同时设置才有效
aria-invalid="true" 告诉辅助技术“这个字段错了”，aria-errormessage 则告诉它“错在哪”——两者缺一不可。只设 aria-errormessage 不设 aria-invalid，NVDA 或 VoiceOver 根本不会播报错误内容；反之，只设 aria-invalid="true" 而不配 aria-errormessage，用户只知道“错了”，但听不到具体提示。
立即学习“前端免费学习笔记（深入）”；
-
aria-invalid取值只能是字符串："true"、"false"、"grammar"、"spelling"，别写true（JS 布尔值）或"invalid" -
aria-errormessage的值必须是单个 ID 字符串，不能空格分隔多个 ID（那是aria-describedby的用法） - 错误提示元素建议加
role="alert"，确保实时播报；若用aria-live="polite"，需确保该元素已存在且未被隐藏
错误提示元素的文案和可访问性要到位
仅把文字塞进去还不够。文案得具体、可操作，比如“手机号应为11位数字，以1开头”，而不是“输入有误”。同时，该元素必须对屏幕阅读器可见（哪怕视觉上隐藏），所以要用 class="sr-only" 这类辅助技术友好样式，而非 display: none。
示例中 sr-only 通常定义为：
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
动态更新时，记得同步刷新 aria-invalid 状态，否则用户改完还被读作“错误”。
aria-errormessage 不替代 aria-describedby，二者职责不同
aria-describedby 用于补充说明（如格式提示、字符限制），aria-errormessage 专用于错误场景。它们可以共存，但不能混用：
- ✅ 正确：
<input aria-invalid="true" aria-errormessage="email-error" aria-describedby="email-hint"> - ❌ 错误：
aria-errormessage="email-hint"（把提示当错误）、或把错误文案直接写进属性值里（aria-errormessage="邮箱格式不正确"）
容易忽略的是：服务端校验失败后，不仅要渲染错误文案，还得确保对应 input 的 aria-invalid 和 aria-errormessage 都被正确设置——hydration 后 JS 补齐或模板直出都得覆盖到。
