Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
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.
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 Authoring Practices Toolbar Pattern provides a working example of a toolbar.
A basic 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 Authoring Practices Tree View Pattern provides a working example of a tree.
For a user interface component using the role attribute: