See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
This technique relates to:
See User Agent Support Notes for ARIA4. Also see WAI-ARIA Technology Notes.
The objective of this technique is to define the role of an element using the role
attribute with one of the non-abstract values defined in the WAI-ARIA Definition of Roles. The WAI-ARIA specification provides an informative description of each role, how it relates to other roles, and the states and properties for each role. When rich internet applications define new user interface widgets, exposing the roles enables users to understand the widget and how to interact with it.
The WAI-ARIA Authoring Practices document demonstrates a toolbar containing three buttons. The div
element has a role of "toolbar", and the img
elements have "button" roles:
<div role="toolbar"
tabindex="0"
id="customToolbar"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);"
onclick="return optionClickEvent(event);"
onblur="hideFocus()"
onfocus="showFocus()"
>
<img src="img/btn1.gif"
role="button"
tabindex="-1"
alt="Home"
id="b1"
title="Home">
<img src="img/btn2.gif"
role="button"
tabindex="-1"
alt="Refresh"
id="b2"
title="Refresh">
<img src="img/btn3.gif"
role="button"
tabindex="-1"
alt="Help"
id="b3"
title="Help">
</div>
The AEGIS project website includes a working example of a menubar.
The WAI-ARIA 1.1. Authoring Practices Guide demonstrates a tree widget. Note the use of the roles "tree", "treeitem", and "group" to identify the tree and its structure. Here is a simplified excerpt from the code:
<ul role="tree" tabindex="0">
<li role="treeitem">Birds</li>
<li role="treeitem">Cats
<ul role="group">
<li role="treeitem">Siamese</li>
<li role="treeitem">Tabby</li>
</ul>
</li>
<li role="treeitem">Dogs
<ul role="group">
<li role="treeitem">Small Breeds
<ul role="group">
<li role="treeitem">Chihuahua</li>
<li role="treeitem">Italian Greyhound</li>
<li role="treeitem">Japanese Chin</li>
</ul>
</li>
<li role="treeitem">Medium Breeds
<ul role="group">
<li role="treeitem">Beagle</li>
<li role="treeitem">Cocker Spaniel</li>
<li role="treeitem">Pit Bull</li>
</ul>
</li>
<li role="treeitem">Large Breeds
<ul role="group">
<li role="treeitem">Afghan</li>
<li role="treeitem">Great Dane</li>
<li role="treeitem">Mastiff</li>
</ul>
</li>
</ul>
</li>
</ul>
The AEGIS project website includes a working example of a tree.
Resources are for information purposes only, no endorsement implied.
(none currently listed)
For a user interface component using the role
attribute:
Check that the value of the role attribute is one of the non-abstract roles from the values defined in the WAI-ARIA specification.
Check that the characteristics of the user interface component are described by the role.
#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.