aria-errormessage 必须与 aria-invalid="true" 同时存在于同一 input 元素上才生效，其值须为页面中真实存在的唯一 id，对应元素需具 role="alert" 且视觉隐藏但辅助技术可读。
aria-errormessage 必须配合 aria-invalid="true" 才生效
单独写 aria-errormessage="email-error" 没用——屏幕阅读器根本不会读错误文案。它只在 aria-invalid="true" 同时存在时，才把那个 ID 对应的元素内容当作错误说明播报出来。
常见错误是：JS 校验失败后只更新了提示文字，却忘了设 input.setAttribute('aria-invalid', 'true')；或者用户改对了，但没重置为 'false' 或移除该属性，导致状态滞留。
- 值必须是字符串
"true"，不能是 JS 布尔true或数字1 -
aria-invalid和aria-errormessage要加在同一个<input>元素上，不能加在 wrapper div 或错误提示本身 - 校验通过后，建议显式调用
input.removeAttribute('aria-invalid')或设为'false'，避免残留
aria-errormessage 的值只能是单个真实存在的 ID 字符串
aria-errormessage 不是放文案的地方，它是个“指针”，必须指向 DOM 中已存在、有唯一 id 的元素。比如 aria-errormessage="phone-error"，那页面里就得有 <div id="phone-error"></div>。
动态创建错误提示再设属性？危险。很多情况下屏幕阅读器完全静默，因为元素还没挂载进 DOM，或被 display: none / aria-hidden="true" 隐藏了。
- 推荐做法：服务端渲染或初始 HTML 就预置空容器，例如
<div id="email-error" class="sr-only" role="alert"></div> - JS 后续只更新
textContent和classList，不删不重建 - 别用空格分隔多个 ID（那是
aria-describedby的用法），aria-errormessage只接受一个 ID
错误提示元素本身要满足可访问性基本条件
就算 ID 对上了，如果提示元素不可被辅助技术感知，照样白搭。它得“存在”且“可读”。
最常踩的坑是用 display: none 或 visibility: hidden 隐藏提示——这会让屏幕阅读器彻底跳过。视觉隐藏要用 class="sr-only" 这类仅对辅助技术可见的样式。
- 必须加
role="alert"，确保错误文案变更时实时播报（比aria-live="polite"更可靠） - 文案要具体、可操作，比如
"手机号应为11位数字，以1开头"，而不是"输入有误" - 不要把提示塞进
aria-label—— 会覆盖<label></label>文本，字段名就丢了
JavaScript 动态更新时容易漏掉同步点
异步校验（如用户名是否可用）最容易出问题：请求还没回来，就提前把 aria-invalid="true" 设上了，结果用户看到“错误”但没提示文案，或提示文案和当前校验规则不匹配。
关键是要让三者同步：输入框的 aria-invalid 状态、aria-errormessage 指向的 ID、以及该 ID 元素的实际内容和可见性。
- 异步校验完成前，保持
aria-invalid为"false"或省略，别抢答 - 切换校验规则（比如从“非空”变成“邮箱格式”）时，要确认
aria-errormessage值仍指向当前有效的提示元素 ID - 更新提示文案后，确保
errorEl.classList.remove('visually-hidden')（或等效逻辑），否则视觉和语义都不可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
