Techniques for WCAG 2.0

On this page:

-

# ARIA4: Using Accessible Rich Internet Applications to programmatically identify form fields as required

## Applicability

HTML and XHTML with scripting and Accessible Rich Internet Application support.

Editorial Note: This technique will be applicable when Accessible Rich Internet Application specifications reach W3C recommendation status.

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 3.3.2 (Labels or Instructions)
  - How to Meet 3.3.2 (Labels or Instructions)
  - Understanding Success Criterion 3.3.2 (Labels or Instructions)

## User Agent and Assistive Technology Support Notes

As of January 2007, the current version of the Accessible Rich Internet Application (ARIA) specification is supported in Firefox 1.5 or later on Windows using Window-Eyes version 5.5 or later and partially supported using JAWS 8.0 or later. Support in other user agents and assistive technologies is in progress. Since ARIA is not yet supported in all technologies, it is important to also use other sufficient techniques to mark a field as required. This particular technique relies on updates made to Firefox 2.0 to allow the use of the required attribute by itself without also defining a role for the element.

## Description

The purpose of this technique is to demonstrate how to use Accessible Rich Internet Applications to programmatically identify form components for which user input or selection are required. Accessible Rich Internet Applications techniques provide the ability to add additional information about elements which can be programmatically determined. The user agent can provide this additional information to assistive technology for presentation to the user.

## Examples

### Example 1

This example uses scripting to add the required state to a form element. In user agents which support namepaces, the required state is assigned using the `setAttributeNS()` application programming interface (API). For other user agents the required state is assigned using the `setAttribute()` API and the namespace is simulated by adding a static text string to the front of the required attribute.

In the example below an array variable, requiredIds, is created with the ids of the elements which need to marked as required. The `setRequired()` function is called from the `onload` event of window object.

The `setRequired()` function loops through all of the ids provided, retrieves the element and assigns the required state of true using the `setAttrNS()` function.

The `setAttrNS()` function will call the `setAttributeNS()` API when it is available to set the required attribute. It uses the appropriate namespace URI, "http://www.w3.org/2005/07/aaa", for the Accessible Rich Internet Applications States and Properties Module. If the `setAttributeNS()` API is not available in the user agent, a static, simulated namespace of, "aaa:" is added to the required attribute name and it is set using the setAttribute() API.

When this page is accessed using Firefox 2.0 or later or Window-Eyes 5.5 or later, Window-Eyes will speak "required" when reading the label for the input fields.

Example Code:

    <head>
     <script type="text/javascript">
     //<![CDATA[

     // array or ids on the required fields on this page
     var requiredIds = new Array( "firstName", "lastName");

     // function that is run after the page has loaded to set the required role on each of the
     //elements in requiredIds array of id values
     function setRequired(){
     	if (requiredIds){
     		var field;
     		for (var i = 0; i< requiredIds.length; i++){
     			field = document.getElementById(requiredIds[i]);
     			setAttrNS(field, "required", "true");
     		}
     	}
     }

     // method to set the attribute values based on the capability of the browser.
     // Use setAttributeNS if it is available,
     // otherwise append a namespace indicator string to the attribute and set its value.
     function setAttrNS(elemObj, theAttr, theValue){
     	if (typeof document.documentElement.setAttributeNS != 'undefined') {
     		elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
     	}else{
     		elemObj.setAttribute("aaa:" + theAttr, theValue);
     	}
     }
     window.onload=setRequired;
    //]]>
     </script>
     </head>
     <body>
     <p>Please enter the following data.  Required fields have been programmatically identified
     as required and  marked with an asterisk (*) following the field label.</p>
     <form action="submit.php">
     <p>
     <label for="firstName">First Name *: </label><input type="text" name="firstName"
        id="firstName" value="" />
     <label for="lastName">Last Name *: </label><input type="text" name="lastName"
        id="lastName"  value="" />
     </p>
     </form>
     </body>

## Resources

Resources are for information purposes only, no endorsement implied.

- Roadmap for Accessible Rich Internet Applications (ARIA Roadmap)

- Roles for Accessible Rich Internet Applications (ARIA Roles)

- States and Properties Module for Accessible Rich Internet Applications (ARIA States and Properties)

## Related Techniques

(none currently listed)

## Tests

### Procedure

1. Load the page using an user agent and/or assistive technology that supports Accessible Rich Internet Applications.

2. Navigate to each required form element and verify that "required" is spoken.

### Expected Results

- Check #2 is true

- Top
- Contents
- Intro
- Previous: Technique ARIA3
- Next: Failure F1