Properties

WAI-ARIA: aria-required (Property)

Authored By :Raghavendra Satish Peri Last Updated :April 20, 2023 Properties

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
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`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)
Expectation	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

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Properties