Skip to content

Technique ARIA2:Identifying a required field with the aria-required property

Applicability

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

This technique relates to:

Description

The objective of this technique is to provide programmatic indication that a form field (which shown through presentation to be required) is mandatory for successful submission of a form.

The fact that the element is required is often visually presented (via a text or non-text symbol, or text indicating input is required or color / styling) but this is not programmatically determinable as part of the field's name.

The WAI-ARIA aria-required property indicates that user input is required before submission. The aria-required property can have values of true or false. For example, if a user must fill in an address field, then aria-required is set to true.

Use of aria-required="true" might be beneficial even when an asterisk or other text symbol is programmatically associated with the field as it may reinforce its required property for some assistive technology users.

The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the aria-required property in addition to the visual presentation makes it much easier for user agents to pass on this important information to the user in a user agent-specific manner. Refer to ARIA in HTML for information on how to provide WAI-ARIA States and Properties with HTML. WAI-ARIA States and Properties are compatible with other languages as well; refer to documentation in those languages.

Examples

Example 1: The required property is indicated by an asterisk placed in the label element

<form action="#" method="post">
  <p>Note: * denotes a required field</p>
  <div>
    <label for="usrname">Login name *:</label>
    <input aria-required="true" autocomplete="username" id="usrname" type="text">
  </div>
  <div>
    <label for="pwd">Password *:</label>
    <input aria-required="true" autocomplete="current-password" id="pwd" type="password">
  </div>
  <div>
    <input type="submit" value="Login">
  </div>
</form>

Example 2: The required property is indicated by the word "required" placed next to the label element

<form action="#" method="post">
  <div>
    <label for="fname">First name:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="given-name" id="fname" type="text">
  </div>
  <div>
    <label for="mname">Middle name:</label> <span>(required)</span>
    <input autocomplete="additional-name" id="mname" type="text">
  </div>
  <div>
    <label for="lname">Last name:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="family-name" id="lname" type="text">
  </div>
  <div>
    <label for="email">Email address:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="email" id="email" type="text">
  </div>
  <div>
    <label for="zip_post">Zip / Postal code:</label> <span>(required)</span>
    <input aria-required="true" autocomplete="postal-code" id="zip_post" type="text">
  </div>
  <div>
    <input type="submit" value="Next Step">
  </div>
</form>

Example 3: Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content::after

This example also uses custom radio buttons with role=radio but the script to make the span actually work like radio buttons is not included in this example. The CSS properties are available below the form. 

<form action="#" method="post">
  <label data-required="true" for="acctnum">Account Number</label>
  <input aria-required="true" id="acctnum" type="text">

  <p data-required="true" id="radio_label">
    Please send an alert when balance exceeds $3,000.
  </p>

  <ul aria-required="true" aria-labelledby="radio_label" role="radiogroup">
    <li aria-checked="false" id="rb1" role="radio" tabindex="0">Yes</li>
    <li aria-checked="false" id="rb2" role="radio" tabindex="-1">No</li>
  </ul>
</form>

Related CSS style definition for this example:

[aria-required=true] {
  border: red thin solid;
}
[data-required=true]::after {
  content: url('/iconStar.gif');
}

Other sources

No endorsement implied.

Tests

Procedure

For each control which is shown via presentation to be required.

  1. Check whether the aria-required attribute is present:
  2. Check whether the value of the aria-required attribute is the correct required state of the user interface component.

Expected Results

  • Checks #1 and #2 are true
Back to Top