ARIA: aria-required 属性
aria-required 属性表示在提交表单之前，用户必须在元素中输入信息。
描述
当语义化 HTML 的 <input>、<select> 或 <textarea> 元素必须具有值时，应为其应用 required 属性。HTML 的 required 属性会阻止表单的提交，除非必需的表单控件具有有效值，同时确保使用辅助技术的导航者能够理解哪些语义化表单控件需要有效的内容。
当使用非语义化元素（例如，具有 role 为 checkbox 的 <div>）创建表单控件时，应包含 aria-required 属性，并将其值设置为 true，以告知辅助技术，在提交表单之前，用户必须在该元素中输入信息。aria-required 属性可与 HTML 表单元素一起使用；它不仅限于具有 ARIA role 的元素。
与设置在语义化 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"]。
如果表单同时包含必需和可选的表单元素，则应通过视觉处理来指示必需的元素，该处理不应仅依赖颜色来传达含义。通常使用描述性文本和/或图标。
注意： 哪些元素是必需的，应该对所有用户都显而易见。请确保视觉呈现以一致、可见的方式指示表单控件是必需的，并记住颜色不足以传达信息。
示例
该属性应添加到表单控件角色（form-control role）上。如果用户需要填写电子邮件地址 textbox，则应在 textbox 上包含 aria-required="true"。
<div id="tbLabel">Email Address *</div>
<div
role="textbox"
contenteditable
aria-labelledby="tblabel"
aria-required="true"
id="email1"></div>
注意： 如果字段的标签已经包含“required”（必需）一词，则建议省略 aria-required 属性。这样可以避免屏幕阅读器两次读出“required”这个词。
在此示例中，必须使用 JavaScript 来阻止包含的表单在 textbox 为空时被提交。
这本可以用语义化的方式编写，无需 JavaScript
<label for="email1">Email Address (required)</label>
<input type="email" id="email1" required />
值
相关接口
Element.ariaRequired-
Element接口的ariaRequired属性反映了aria-required属性的值。 ElementInternals.ariaRequired-
ElementInternals接口的ariaRequired属性反映了aria-required属性的值。
相关角色
用于角色
继承至角色
规范
| 规范 |
|---|
| 无障碍富互联网应用程序 (WAI-ARIA) # aria-required |