Techniques for WCAG 2.0

Skip to Content (Press Enter)

ARIA Techniques for WCAG 2.0

This Web page lists ARIA Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.


Table of Contents


[begin add]

WAI-ARIA Technology Notes

To improve accessibility, WAI-ARIA provides Web developers with the option to add the following semantic information to Web pages and rich Internet widgets which are then exposed to the browser:

  • Roles to describe the type of widget presented, such as "menu", "treeitem", "slider" and "progressbar."

  • Roles to describe the structure of the Web page, such as headings, regions, search areas and navigation areas.

  • Properties to describe the state widgets are in, such as "checked" for a check box, "haspopup" for a menu that renders a sub-menu or other popup and "expanded/collapsed" for a tree node.

  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates. Assistive technologies may present critical updates as soon as they are rendered. However, incidental updates are presented only after completing the current task. For example, a screen reader informs a user of an incidental update only after it finishes reading the current paragraph.

  • Properties for drag-and-drop that describe drag sources and drop targets

  • A method to provide keyboard navigation for rich internet widgets.

The combination of these features and the structural information conveyed by the DOM structure allow authors to produce an interoperable solution to assistive technologies. (Source: WAI-ARIA Overview)

User Agent Support for WAI-ARIA

User Agent support for WAI-ARIA varies, but overall support for WAI-ARIA is improving. Browsers which support WAI-ARIA map WAI-ARIA roles and properties to platform accessibility APIs.

  • Firefox 1.5 and Firefox 2.0 partially supports WAI-ARIA, however it requires the use of namespaces, and doesn't support the use of Liveregions.

  • Firefox 3+ contains better support for WAI-ARIA, including Liveregions.

  • IE8 partially supports WAI-ARIA.

  • JAWS 8 and Window-Eyes 5.5+ partially support WAI-ARIA.

  • Jaws 10+ supports WAI-ARIA.

  • FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access.

  • NVDA partially supports WAI-ARIA.

Accessibility Support for WAI-ARIA

Using technologies in an Accessibility Supported way is required for conformance claims. Read more about Accessibility Support. The WCAG Working Group plans to review which WAI-ARIA techniques are sufficient when Accessible Rich Internet Application specifications reach W3C recommendation status. Refer to WAI-ARIA Overview for the latest information on the status of WAI-ARIA.

[end add]
[begin change]

ARIA1: Using the aria-describedby property to provide a descriptive label for input controls

Applicability

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

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

This technique relates to:

User Agent and Assistive Technology Support Notes

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

IE 8 only supports aria-labelledby with a single id value and it does not support aria-describedby at all.

Description

The purpose of this technique is to demonstrate how to use the WAI-ARIA aria-describedby property to provide programmatically determined, descriptive information about a user interface element. The aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list. The id reference list contains one or more unique element id's.

Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Note: At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.

Examples

Example 1: XHTML

This example is coded in XHTML with a MIME type of application:xhtml+xml. This MIME type is not supported in all user agents. The aria-describedby property is added directly into the XHTML markup, and no additional scripting is needed.

Example Code:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1
 For Accessible Adaptable Applications//EN"
  "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 <head>
 <meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
 <title>Demonstration of aria-describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
   float:left;
   width:400px;
 }
 .right {
   width:100px;
   text-align:right;
 }
 </style>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications aria-describedby property 
 to provide more detailed information about the button action</p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
 <span class="right"><button id="fontB" onclick="doAction('Fonts');" aria-describedby="fontDesc">
 Fonts </button></span></p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
 <span class="right"><button id="colorB" onclick="doAction('Colors');" aria-describedby="colorDesc">
 Colors </button></span></p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
 <span class="right"><button id="customB" onclick="doAction('Customize');" aria-describedby="customDesc"> 
 Customize </button></span></p>
 </div>
 </body>
 </html>

Example 2: HTML

This example uses scripting to add an aria-describedby property to buttons on a page. The example creates a buttonIds array variable to hold the ids of the elements that contain description text. The setDescribedBy() function is called from the onload event of the window object.

The setDescribedBy() function loops through all of the button elements and calls setAttribute() on each button element to set the aria-describedby property. Each button's aria-describedby property is set to the id of the element containing its descriptive text.

Using a user agent and/or assistive technology which supports WAI-ARIA, the description will be provided when the user interface controls receive focus.

Example Code:

 <head>
 <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
 <title>Demonstration of aria-describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
.left {
  float:left;
  width:400px;
}
.right {
	width:100px;
	text-align:right;
}
 </style>
 <script type="text/javascript">
 //<![CDATA[

 // array entries for each button on the page that associates the button id 
 // with the id of the element containing the text which describes the button
 var buttonIds = new Array();
 buttonIds["fontB"]= "fontDesc";
 buttonIds["colorB"] = "colorDesc";
 buttonIds["customB"] = "customDesc";

 // function that is run after the page has loaded to set the aria-describedBy
 // property on each of the elements referenced by the array of id values
 function setDescribedBy(){
	if (buttonIds){
		var buttons = document.getElementsByTagName("button");
		if (buttons){
			var buttonId;
			for(var i=0; i<buttons.length; i++){
				buttonId = buttons[i].id;
				if (buttonId && buttonIds[buttonId]){
					buttons[i].setAttribute("aria-describedby", buttonIds[buttonId]);
				}
			}
		}
	}
 }

 // simulated action function - currently just displays an alert
 function doAction(theAction){
	alert("Perform the " + theAction + " action");
 }

 window.onload=setDescribedBy;

//]]>
 </script>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications 
 aria-describedby property to provide more detailed information 
 about the button action.
 </p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
    <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
 </p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
    <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
 </p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
    <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
 </p>
 </div>
 </body>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Check that there is an input control having an aria-describedby attribute that references one or more elements via unique id.

  2. Check that the referenced element or elements provide additional information about the input control.

Expected Results

  • #1 and #2 are true.

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.

[end change]
[begin change]

ARIA2: Identifying required fields with the aria-required property

Applicability

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

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

This technique relates to:

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 determinable way that the completion of a user input field is mandatory. 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: 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 Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Note 2: At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.

Examples

Example 1: A required text input field in XHTML

The following example shows an XHTML document using the aria-required property to indicate that a form field must be submitted. The mandatory nature of the field is also indicated in the label as a fallback for user agents that do not support WAI-ARIA.

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 
    For Accessible Adaptable Applications//EN"
  "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
          xml:lang="en">
  <head>
    <title>Required Input</title>
  </head>
  <body>
    <h1>Required Input</h1>
    <p>The following form input field must be completed by the user
    before the form can be submitted.</p>
    <form action="http://example.com/submit">
      <p>
        <label for="test">Test (required)</label>
        <input name="ariaexample" id="example" aria-required="true" aria-label="Test"/>
      </p>
      <p>
        <input type="submit" value="Submit" />
      </p>
    </form>
  </body>
</html>
		

Example 2: Adding aria-required property via script

This example uses scripting to add the aria-required property to a form element. The required property is assigned using the setAttribute() API.

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

The setRequired() function loops through all of the ids provided, retrieves the element and assigns the aria-required property of true using the setAttribute() function.

When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader 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 aria-required property 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]);
 			field.setAttribute("aria-required", "true");
 		}
 	}
 }
 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.

Tests

Procedure

  1. Access a page with mandatory form fields in a user agent that supports the Accessible Rich Internet Applications specification.

  2. Leaving mandatory form fields empty, attempt to submit the form.

  3. Check that that the user agent notifies of the missing information.

  4. Provide values for the mandatory fields.

  5. Check that the user agent allows form submission to proceed.

Expected Results

  • #3 and #5 are true

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.

[end change]
[begin change]

ARIA3: Identifying valid range information with the aria-valuemin and aria-valuemax properties

Applicability

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

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

This technique relates to:

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 provide information about the allowable range of an entry field in a programmatically determinable way. The WAI-ARIA aria-valuemin and aria-valuemax states provide the minimum and maximum (respectively) values that may be provided by the user. Some user agents will not permit users to enter values outside that range, or will generate a validation error if users do so. The developer is still responsible for providing validation that the value is within the range.

Refer to Supporting ARIA in XHTML and HTML 4.01 for information on how to provide WAI-ARIA States and Properties with XHTML and HTML. WAI-ARIA States and Properties is compatible with other languages as well; refer to documentation in those languages.

Note: Note: At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.

Examples

Example 1: A spinner control that provides values between 1 and 100

The following spin button allows users to enter a number between 1 and 100 (inclusive).

Example Code:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 
  For Accessible Adaptable Applications//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
  xml:lang="en">
<head>
  <title>Spin Button</title>
</head>
<body>
  <h1>Spin Button</h1>
  <p>Spin button allows users to enter a number between 1 and 100. It is 
    implemented as a text input, to which user agents that do not support 
    ARIA roles fall back.</p>
  <form action="http://example.com/submit">
    <p><label for="test">Enter a number between 1 and 100</label>
    <input name="test" id="test" role="spinbutton" 
      aria-valuemin="1" aria-valuemax="100" /></p>
    <p><input type="submit" value="Submit" /></p>
  </form>
</body>
</html>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Access a page with form fields that require data in a certain range, using a user agent that supports the Accessible Rich Internet Applications specification.

  2. Provide information that is outside the allowable range, and attempt to submit the form.

  3. Check that the user agent notifies the user of the invalid data.

  4. Provide information that is inside the allowable range, and attempt to submit the form.

  5. Check that the user agent accepts the data and allows the submit to proceed.

Expected Results

  • #3 and #5 are true

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.

[end change]
[begin delete]

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:

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)

(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

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.


[end delete]