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

Status

Added to XML by AWK Dec 20, 2013

See ARIA2: Identifying required fields with the aria-required property for the current version of this technique.

September 26, 2013

Surveyed by TF 26 September 2013

Updated per the surveyed comments

Applicability

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

This technique relates to:

Success Criterion 1.3.1 (Info and Relationships)

User Agent and Assistive Technology Support Notes

See User Agent Support for WAI-ARIA for general information on user agent support.

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: 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:

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

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

[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,

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

Expected Results

Test #1 is true