Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

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

Applicability

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

This technique relates to:

User Agent and Assistive Technology Support Notes

See User Agent Support Notes for ARIA2.

Description

The objective of this technique is to indicate in a programmatically determined way that the completion of a user input field is mandatory for successful submission of a form when there is a visual cue to this effect.

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".

Note 1: Note: 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.

Examples

Example 1:

The required property is indicated by an asterisk placed next to the label element:


<form action="#" method="post"  id="login1" onsubmit="return errorCheck1()">
  <p>Note: [*]denotes mandatory field</p> 
  <p>
    <label for="usrname">Login name: </label> 
    <input type="text" name="usrname" id="usrname" aria-required="true"/>[*]
  </p>
  <p>
    <label for="pwd">Password</label> 
    <input type="password" name="pwd" id="pwd" size="12" aria-required="true" />[*]
  </p> 
  <p>
    <input type="submit" value="Login" id="next_btn" name="next_btn"/>
  </p>
 
</form>		

Example 2:

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

<head>
<form action="#" method="post" id="step1" onsubmit="return errorCheck2()">
  <p>
    <label for="fname">First name: </label> 
    <input type="text" id="fname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="mname">Middle name: </label> 
    <input type="text" id="mname" />
  </p>
  <p>
    <label for="lname">Last name: </label> 
    <input type="text" id="lname" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="email">Email address: </label> 
    <input type="text" id="email" aria-required="true" />
    [required]
  </p>
  <p>
    <label for="zip_post">Zip / Postal code: </label> 
    <input type="text" id="zip_post" size="6" aria-required="true" />
    [required]
  </p>
  <p>
    <input type="submit" value="Next Step" id="step_btn" name="step_btn" />
  </p>
</form> 

Example 3:

Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before. 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.

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

 <p id="radio_label">Please send an alert when balance exceeds $3,000.</p>
 
 <ul  id="rg" role="radiogroup" aria-labelledby="radio_label">
    <li id="rb1" role="radio" aria-required="true">Yes</li>
    <li id="rb2" role="radio" aria-required="true">No</li>
 </ul>	
</form> 
 
<head>
[aria-required=true] {
  border: red thin solid;
} 
[aria-required=true]:before {
  content: url('/iconStar.gif');
}

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

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each element where the aria-required attribute is present:

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

Expected Results

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.

Techniques are Informative

Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.