aria-invalid 是 ARIA 属性，用于告知辅助技术表单控件值是否验证失败；应在字段失焦或提交时、且确违反业务规则后设为 "true"，校验通过后须显式设为 "false" 或移除。
aria-invalid 是什么，什么时候该设为 true
aria-invalid 是一个 ARIA 属性，用于向辅助技术（如屏幕阅读器）传达表单控件当前值是否验证失败。它不是自动生效的——HTML 不会自己判断输入是否合法，必须由 JS 主动设置。
常见误用是只在提交时设 aria-invalid="true"
实际应满足两个条件才设为 true：
- 输入值确实违反了业务规则（比如邮箱格式不对、必填项为空）
- 且该字段已失去焦点（blur）或用户已尝试提交（避免过早干扰输入过程）
怎么用 JS 动态设置 aria-invalid
核心逻辑就是：监听事件 → 校验 → 设置属性。不建议在 input 实时校验并设 aria-invalid，容易造成频繁播报干扰。
- 对单个字段，推荐监听
blur事件后校验，再设aria-invalid - 提交时统一校验所有字段，批量设置
aria-invalid - 校验通过后，**必须显式设回
aria-invalid="false"或移除该属性**，否则屏幕阅读器可能仍读作“无效”
示例：
立即学习“前端免费学习笔记（深入）”；
const emailInput = document.querySelector('#email');
emailInput.addEventListener('blur', () => {
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value);
emailInput.setAttribute('aria-invalid', !isValid ? 'true' : 'false');
});配合 CSS 样式和错误消息一起用才有效
aria-invalid 单独存在对视觉用户毫无意义。必须同步做三件事：
- 用 CSS 选中
[aria-invalid="true"]改边框颜色、加图标等 - 在输入框附近插入一条可见的错误文案（不能只靠
aria-describedby指向隐藏文本） - 确保错误文案的
id和输入框的aria-describedby值一致
错误文案要放在输入框之后、同一 DOM 层级，且不被 display: none 隐藏（可用 visibility: hidden + position: absolute 隐藏但保留可读性）。
容易忽略的兼容性和细节
部分旧版 NVDA 或 JAWS 对 aria-invalid 支持不稳定，尤其动态修改后不播报。这时需额外触发 aria-live 区域更新。
-
aria-invalid只接受"true"、"false"、"grammar"、"spelling"四种字符串值，传布尔值true会被转成"true"，但语义不准确 - 不要用
element.ariaInvalid = true（这是实验性属性，IE/旧 Edge 不支持） - 如果字段用了
role="combobox"等复合角色，aria-invalid仍有效，但需确认整个组件的无障碍结构完整
最常出问题的是：JS 校验逻辑和 UI 状态不同步，比如清空输入后没重置 aria-invalid，或者错误消息 DOM 被重复插入导致 aria-describedby 指向失效。
