aria-invalid

适用场景

适用于当前值未通过验证的输入框、文本域、组合框、列表框或其他表单控件。应在用户有机会输入内容之后再设置 aria-invalid="true" — 通常在失焦或提交时设置。若在初始渲染时就设置，会在用户尚未操作之前就将空的必填字段播报为无效，造成干扰。

应同时提供实际的错误消息。标准做法如下：

1. 渲染一条带有独立 id 的可见错误消息。
2. 在输入框上设置 aria-invalid="true"。
3. 将 aria-describedby 指向错误消息的 id。

屏幕阅读器随后会同时播报无效状态及说明：“Email，编辑，无效条目，请输入有效的电子邮件地址”。

如何保持同步

有效值为 "true"、"false"、"grammar" 和 "spelling"。实际使用中最常见的是 "true" 和 "false"。"grammar" 和 "spelling" 用于富文本编辑器中标记特定文本段；大多数表单工作流无需使用。

默认值为 "false"（或省略）。验证失败时，将其设置为 "true" 并显示错误消息。用户更正字段后，应同时清除两者 — 将 aria-invalid 重置为 "false" 并移除或隐藏错误消息。

HTML 属性 required 和 CSS 伪类 :invalid 的运行机制相互独立。aria-invalid 是屏幕阅读器消费的标志；其他两者面向浏览器和样式处理。需保持三者同步。

常见错误

• 在用户尚未与字段交互之前就设置 aria-invalid="true"。
• 将字段标记为无效，但既未设置 aria-describedby，也未提供可见错误消息 — 屏幕阅读器仅播报”无效”，没有任何说明。
• 在用户已更正字段值后仍保留 aria-invalid="true"。
• 将 aria-describedby 指向空容器，导致错误播报为静默。
• 在 <fieldset> 或其他非输入容器上使用 aria-invalid — 在此处无实际意义。
• 仅依赖颜色来表示错误状态 — aria-invalid 帮助屏幕阅读器识别错误；仍需为视力正常的用户提供可见的标签或图标（WCAG 1.4.1）。

示例

<label for="email">电子邮件地址</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">请输入有效的电子邮件地址。</p>