aria-required

何时使用

仅当 HTML required 属性不可用时使用。原生表单字段 — <input>、<select>、<textarea> — 应使用 required。HTML 属性可被所有屏幕阅读器识别，参与浏览器原生表单校验，并触发 :required CSS 伪类。aria-required 本身不具备上述任何功能；它纯粹是一个宣告信号。

以下情况可合法使用 aria-required：

• 基于 <div> 或自定义样式 <input> 构建的 role="combobox"，且已接管校验逻辑。
• role="radiogroup" 整体为必填项（无法在 <div> 上使用 required）。
• 自定义日期选择器、文件选择器或评分组件，且不是原生 input。

如果可以使用 HTML required，应优先使用。

行为说明

布尔值。aria-required="true" 使辅助技术在宣告字段名称和角色时，附带宣告”必填”（或”必须填写”，具体措辞因屏幕阅读器而异）。aria-required="false" 与省略该属性等效，通常无需设置。

aria-required 不会阻止表单提交，不会添加红色星号，不会切换 CSS 伪类。它纯粹是向辅助技术发出的信号。校验逻辑、错误提示以及可见的必填标记，仍须由开发者自行实现。

可见的必填标记（*、“必填”等文字）也应通过无障碍名称传达 — 无论是在可见标签文本中，还是通过描述属性 — 确保视力正常用户与辅助技术用户获得相同的信息。

常见错误

• 在原生 <input> 上使用 aria-required="true" 而非 HTML required 属性。虽然有效，但放弃了浏览器校验和 :required 样式，毫无必要。
• 在非表单控件上设置 aria-required="true" — 例如按钮、标题或没有 role 的 div。该属性会被忽略。
• 遗漏可见的必填标记。视力正常用户看到的是未标记字段；辅助技术用户听到的是”必填”。违反 WCAG SC 1.3.3。
• 在 ARIA 中标记字段为必填，但实际表单提交校验中跳过了该字段。宣告称其必填，服务器却接受空值。
• 过早将 aria-required 与 aria-invalid="true" 组合使用。字段仅在用户尝试提交后留空时才是无效的，不应在页面加载时即标记为无效。
• 对可见的”*“标记做了本地化，却忘记更新标签中对应的屏幕阅读器文本，导致两者不匹配。

示例

<!-- Native input: prefer the HTML attribute -->
<label for="email">
  Email <span aria-hidden="true">*</span>
</label>
<input id="email" type="email" required aria-describedby="email-hint">
<p id="email-hint">Required. We will only use this to send your receipt.</p>

<!-- Custom combobox where HTML required isn't available -->
<div
  role="combobox"
  aria-required="true"
  aria-labelledby="country-label"
  aria-controls="country-listbox"
  aria-expanded="false"
>
  <input type="text" id="country-input">
</div>
<span id="country-label">Country (required)</span>