aria-required

aria-required 属性指示在提交表单之前，元素上需要用户输入。

描述

当语义 HTML <input>、<select> 或 <textarea> 必须具有值时，应将其应用于 required 属性。HTML required 属性禁用提交表单，除非必填表单控件具有有效值，同时确保使用辅助技术的用户了解哪些语义表单控件需要有效内容。

当使用非语义元素（例如具有 角色 为 checkbox 的 <div>）创建表单控件时，应包含 aria-required 属性，其值为 true，以指示辅助技术元素需要用户输入才能提交表单。aria-required 属性可用于 HTML 表单元素；它不限于分配了 ARIA 角色的元素。

与设置在语义 HTML 表单控件上的 HTML required 属性类似，aria-required 属性明确地向辅助技术传达元素在提交表单之前是必需的。如果不存在值，则语义 HTML 表单控件上的 required 属性将阻止表单控件提交——如果用户尝试提交表单时必填值无效，则某些浏览器会提供本机错误消息。aria-required 属性（与所有 ARIA 状态和属性一样）对元素功能没有任何影响。必须使用 JavaScript 添加功能和行为。

注意：ARIA 仅修改可访问性树，修改辅助技术如何向用户呈现内容。ARIA 不会更改元素功能或行为的任何内容。当不按预期用途和默认功能使用语义 HTML 元素时，必须使用 JavaScript 管理行为、焦点和 ARIA 状态。

CSS :required 和 :optional 伪类分别根据 <input>、<select> 和 <textarea> 元素是必填还是可选来匹配它们。当使用非语义元素作为表单控件时，您无法获得此 CSS 伪类选择器的好处。但是，如果属性存在，您可以使用属性选择器：[aria-required="true"] 或 [aria-required="false"]。

如果表单同时包含必填和可选表单元素，则应使用不完全依赖颜色来传达含义的处理方法在视觉上指示必填元素。通常，使用描述性文本和/或图标。

注意：哪些元素是必填的应该对所有用户都清晰可见。确保视觉呈现以一致、可见的方式指示表单控件是必填的，并记住颜色不足以传达信息。

示例

应将属性添加到表单控件角色。如果用户需要填写电子邮件地址 textbox，请在文本框上包含 aria-required="true"。

html
<div id="tbLabel">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="tblabel"
  aria-required="true"
  id="email1"></div>

注意：如果字段的标签已包含“必填”一词，建议省略 aria-required 属性。这样可以避免屏幕阅读器两次读出“必填”一词。

在此示例中，必须使用 JavaScript 来防止在文本框没有内容的情况下提交包含的表单。

这可以用语义的方式编写，无需 JavaScript

html
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />

值

true

该元素需要一个值或必须选中才能提交表单。

false

该元素不是必填的。

关联接口

Element.ariaRequired

ariaRequired 属性（Element 接口的一部分）反映 aria-required 属性的值。

ElementInternals.ariaRequired

ariaRequired 属性（ElementInternals 接口的一部分）反映 aria-required 属性的值。

关联角色

用于角色

继承到角色

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-required

另请参阅