aria-invalid的核心作用是向辅助技术明确告知表单字段的无效状态；它必须加在input等控件上，取值为"true"/"false"，需配合aria-describedby指向唯一id的错误提示元素，并由javascript动态管理状态以确保准确播报。
aria-invalid 不是视觉样式开关，它只告诉辅助技术“这个字段当前有错误”，但不会自动改变外观或阻止表单提交。必须配合 CSS 和 JavaScript 才能真正实现错误标注的完整闭环。
什么时候该用 aria-invalid 而不是单纯加 class？
当表单需要被屏幕阅读器准确感知错误状态时——比如用户输入邮箱格式错误，aria-invalid="true" 会让 NVDA 或 VoiceOver 在聚焦该 <input> 时主动读出“无效”或“有错误”。仅靠 class="error" 不会触发这种语义播报。
- 适用场景：登录/注册页、地址表单、带实时校验的搜索框
- 不适用场景：纯前端展示型提示（如 tooltip）、服务端返回后整页刷新的错误页
-
aria-invalid值只有"true"、"false"、"grammar"、"spelling"，别写"invalid"或布尔值true（HTML 属性值只能是字符串）
aria-invalid 必须和 aria-describedby 配合使用
单独设 aria-invalid="true" 只告诉“错了”，但不说明“哪里错/为什么错”。屏幕阅读器用户无法获知具体错误信息，体验断层。
- 正确做法：在
<input id="email">上同时设置aria-invalid="true"和aria-describedby="email-error" - 对应错误提示元素需用
id="email-error"，且建议加role="alert"确保实时播报 - 错误文案要具体，避免“输入有误”，改用“请输入有效的邮箱地址，例如 name@example.com”
<input id="email" aria-invalid="true" aria-describedby="email-error"><div id="email-error" role="alert">请输入有效的邮箱地址</div>
别忘了同步更新 aria-invalid 的时机和值
很多开发者设了初始值就不管了，导致用户修正后仍被读作“错误”，或错误未清空时状态滞留。
- 校验逻辑触发点：失去焦点（
blur）、输入时防抖（input+ setTimeout）、提交时（submit） - JavaScript 更新示例：
inputEl.setAttribute('aria-invalid', isValid ? 'false' : 'true'); - 注意兼容性：IE11 支持
aria-invalid，但部分旧版 JAWS 对动态更新响应延迟，可加aria-live="polite"到错误容器强化通知 - 服务端校验失败后，不仅要渲染错误文案，还要确保对应 input 的
aria-invalid被设为"true"（服务端模板或 hydration 后 JS 补齐）
CSS 样式不能只依赖 [aria-invalid="true"]
仅用属性选择器控制红框/图标容易漏掉视觉一致性需求——比如错误文字颜色、输入框 focus 状态叠加、高对比度模式下的表现。
- 推荐组合：给 input 同时加 class（如
is-invalid）和aria-invalid，CSS 用.is-invalid, [aria-invalid="true"]双保险 - 避免仅靠
[aria-invalid]控制颜色，因为aria-invalid默认无值等价于"false"，而[aria-invalid]选择器会匹配所有含该属性的元素（包括aria-invalid="false"） - 高对比度模式下，Windows 系统可能忽略 border-color，务必测试
outline或背景色是否可见
最常被忽略的一点：当表单支持多语言时，aria-describedby 指向的错误文案必须随 locale 动态切换，否则屏幕阅读器会读出错误语言的提示——而 aria-invalid 本身不携带语言信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
