Technique ARIA4:Using a WAI-ARIA role to expose the role of a user interface component

Applicability

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

This technique relates to 4.1.2: Name, Role, Value (Sufficient when used with G10: Creating components using a technology that supports the accessibility notification of changes).

Description

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.

Examples

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

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

Other sources

No endorsement implied.

• Accessible Rich Internet Applications (WAI-ARIA), Roles
• Accessible Rich Internet Applications (WAI-ARIA), The Roles Model
• HTML Accessibility API Mappings 1.0
• WAI-ARIA Authoring Practices Guide
• Notes on using ARIA in HTML

Tests