1. 认识 aria-invalid 的定义与作用
1.1 aria-invalid 的定义
在 HTML 表单中，aria-invalid 表示控件的当前状态是否包含客户的无效输入。这一属性属于 ARIA 标准的一部分，旨在让辅助技术更清晰地传达状态。
它不会直接改变控件的默认校验行为，但会向屏幕阅读器和其他辅助设备提供状态信息，从而提升 可访问性 与用户对错误的理解。
1.2 aria-invalid 的场景与目标
当字段值不符合期望时，使用 aria-invalid="true" 告知辅助技术当前存在错误；当用户修正后应将其置回 aria-invalid="false"，以便恢复正常状态。
常见场景包括邮箱格式错误、必填字段为空、数字范围不正确等，及时标记错误有助于降低用户困惑。
<label for="email">邮箱</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="emailError" />
<span id="emailError" role="alert" aria-live="assertive">请输入有效的邮箱地址。</span>2. 如何在表单字段中正确使用 aria-invalid
2.1 基本用法
要在表单字段中表达错误状态，aria-invalid="true" 应搭配错误信息描述，通过 aria-describedby 将错误文本与控件关联起来。
为获得更好的无障碍体验，还应在无障碍树中清晰呈现错误文本，避免仅用视觉提示。
<label for="username">用户名</label>
<input id="username" type="text" aria-invalid="true" aria-describedby="usernameError" />
<span id="usernameError" role="alert" aria-live="assertive">用户名不能为空。</span>2.2 动态校验与无障碍提示
在前端校验中，当输入变化时应动态切换 aria-invalid 的值，同时保持错误文本的可访问性。动态更新 能让屏幕阅读器及时播报状态变化。
也可以通过 aria-live 属性提升异步错误信息的可访问性。
const el = document.getElementById('username');
function validate() {const ok = el.value.trim().length > 0;el.setAttribute('aria-invalid', ok ? 'false' : 'true');// 错误消息通常通过 aria-describedby 进行更新
}3. aria-invalid 与屏幕阅读器的兼容性
3.1 主流屏幕阅读器的行为
主流屏幕阅读器如 NVDA、VoiceOver、JAWS 对 aria-invalid 的读取有一致性支持，能在焦点进入时播报“字段无效（invalid）”的提示。
不过不同设备对错误文本的呈现方式不同，应通过 aria-describedby 将文本位置明确、可读性高地传达给用户。
3.2 与 aria-live 的协同
将错误信息置于具有 aria-live="assertive" 的区域，能让屏幕阅读器在错误产生时立即播报。
这对于异步验证或实时反馈尤为重要，因为用户不需要额外的操作就能获取提示。
<span id="emailError" role="alert" aria-live="assertive">请输入有效的邮箱地址。</span>4. 实践要点：结合其他无障碍属性
4.1 使用 aria-describedby 提供错误信息
错误文本通过 aria-describedby 与控件链接，从而在聚焦时被屏幕阅读器朗读。
描述文本的清晰度 对用户理解错误至关重要，避免使用专业术语或模糊表达。
<label for="password">新密码</label>
<input id="password" type="password" aria-invalid="true" aria-describedby="pwdError" />
<span id="pwdError" role="alert" aria-live="assertive">密码长度需≥8位。</span>4.2 与原生表单校验的关系
原生校验（如 type="email"）在可用时应保留，但对于无障碍传达，结合 aria-invalid 和自定义信息更为有效。
不要让 aria-invalid 完全替代浏览器的原生提示，而是作为辅助性指示，提升可访问性。
5. 常见误区与调试技巧
5.1 常见误区
错误标记常见于未清晰包含错误文本；或者将 aria-invalid 设置为 true 却没有相应的 aria-describedby 提供可读文本。
另一个误区是将 aria-invalid 与只读字段混淆，只读 不等同于无效状态，应确保状态描述准确。
<input id="password" aria-invalid="true" aria-describedby="pwdError" />
<span id="pwdError" role="alert" aria-live="assertive">密码错误。</span>5.2 调试技巧
使用浏览器开发者工具检查对象的 ARIA 属性，确保在无效与有效状态之间切换正常。
在屏幕阅读器环境中进行手动测试，以确保错误信息能在聚焦时被朗读。
<input id="email" aria-invalid="true" aria-describedby="emailError" />
<span id="emailError" role="alert" aria-live="assertive">请输入有效的邮箱地址。</span>