ARIA4Usar un atributo role de WAI-ARIA para exponer la función de un componente de la interfaz de usuario

Aplicabilidad

Tecnologías compatibles con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El objetivo de esta técnica es definir la función de un elemento usando el atributo role con uno de los valores no abstractos definidos en la definición de roles de WAI-ARIA. La especificación WAI-ARIA proporciona una descripción informativa de cada rol, de cómo se relaciona con otros roles y de los estados y propiedades de cada rol. Cuando las aplicaciones de internet enriquecidas definen nuevos componentes (widgets) de interfaz de usuario, exponer los roles permite a los usuarios entender el componente y cómo interactuar con él.

Ejemplos

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

Pruebas

Recursos

• Accessible Rich Internet Applications (WAI-ARIA), Roles (sección sobre roles)
• Accessible Rich Internet Applications (WAI-ARIA), The Roles Model (el modelo de roles)
• HTML Accessibility API Mappings 1.0
• WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
• Notes on using ARIA in HTML (notas sobre el uso de ARIA en HTML)