WAI-ARIA: aria-required (Property)
Description
Indicates that user input is required on the element before a form may be submitted.
For example, if the user needs to fill in an address field, the author will need to set the field’s aria-required attribute to true.
Note: The fact that the element is required is often presented visually (such as a sign or symbol after the widget). Using the aria-required attribute allows the author to explicitly convey to assistive technologies that an element is required.
Unless an exactly equivalent native attribute is available, host languages SHOULD allow authors to use the aria-required attribute on host language form elements that require input or selection by the user.
Browser Compatibility For aria-required
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaRequired | ChromeFull support81 | EdgeFull support81 | FirefoxNo supportNo | Internet ExplorerNo supportNo | OperaFull support68 | SafariFull support12.1 | WebView AndroidFull support81 | Chrome AndroidFull support81 | Firefox for AndroidNo supportNo | Opera AndroidFull support58 | Safari on iOSFull support12.2 | Samsung InternetFull support13.0 |
Screen Reader Support For aria-required
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey the “false” value | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
| MUST convey the “true” value | supported | supported | supported | partial (2/3) | supported | supported | supported | partial (1/3) | none | supported | supported |
aria-required Example
HTML Example
<div class="text">
<label id="tp1-label" for="first">First Name:</label> <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false">
<div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">
Your first name is optional
</div>
</div>Characteristics
Related Concepts
- HTML required
Used in Roles
Inherits into Roles
Value
- True/False
Value representing either true or false. The default value for this value type is False, unless otherwise specified. - False (default)
- User input is not necessary to submit the form.
- True:
- Users need to provide input on an element before a form is submitted.
Semantic HTML
Use the HTML “required” attribute.
<input type=”text” required>
—-
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Reference
- W3C (opens new window)
- A11Y Support
- MDN Web Docs
