aria-invalid的核心作用是让屏幕阅读器在表单验证失败时立刻明确告知用户“这个字段错了”；它必须由JavaScript主动设置为"true"/"false"或省略，且需配合aria-describedby指向唯一ID的错误提示元素，否则仅报“无效”而不说明原因。
aria-invalid 的取值和语义含义
aria-invalid 是一个布尔型 ARIA 属性，但它不只接受 true / false，实际支持四个值：true、false、grammar、spelling。只有设为 true 时，才被屏幕阅读器普遍识别为“校验失败”；其余值（如 grammar）仅在少数场景下有细化提示作用，多数表单校验用不到。
关键点：不要写 aria-invalid="1" 或 aria-invalid（无值），这会被视为无效或默认 false；也不要用 aria-invalid="invalid"——浏览器不认。
什么时候该加 aria-invalid="true"
它不是“有输入就加”，而是严格对应校验逻辑的失败状态。常见误用是前端只靠样式（比如红边框）判断，但没同步更新 aria-invalid。
- 用户提交后，后端返回字段错误 → 此时设置
aria-invalid="true" - 实时校验中，邮箱格式不对且焦点离开 → 立即设为
true，同时显示提示文案 - 用户已修正错误（比如删掉非法字符并失焦）→ 必须同步移除或设为
false，否则辅助技术会持续报错
必须配合 aria-describedby 才有用
单独设 aria-invalid="true" 只会让屏幕阅读器说“无效”，但不会读出错在哪。真正起作用的是把它和错误文案 ID 关联起来：
立即学习“前端免费学习笔记（深入）”；
<input id="email" aria-invalid="true" aria-describedby="email-error"> <div id="email-error" role="alert">请输入有效的邮箱地址</div>
注意：role="alert" 能触发即时播报，但仅限动态插入的错误文案；如果错误文案一开始就存在，用 aria-live="polite" 更稳妥。
和原生 required / pattern 校验的关系
aria-invalid 和 HTML5 原生校验（required、pattern）不自动同步。即使你用了 input.reportValidity()，它也不会自动设置 aria-invalid。
所以必须手动控制：
- 监听
invalid事件（注意：它不冒泡，得绑定在input上） - 调用
setCustomValidity("xxx")后，需手动设aria-invalid - 避免混用：如果全用原生校验，就别再加
aria-invalid；如果自己做校验逻辑，就必须全程接管aria-invalid和aria-describedby
最易忽略的一点：服务端返回的错误字段，前端不仅要渲染提示文案，还得确保对应 input 的 aria-invalid 和 aria-describedby 都更新到位——漏掉任意一环，视障用户就收不到完整反馈。
