Técnica ARIA WCAG 2.2

ARIA4Indicar con el atributo role qué tipo de componente es

Nombre oficial en el W3C: Usar un atributo role de WAI-ARIA para exponer la función de un componente de la interfaz de usuario

En pocas palabras

Cuando un componente se fabrica a medida con div, span o imágenes, el navegador no sabe qué es. El atributo role le dice al lector de pantalla si se trata de una barra de herramientas, una pestaña, un árbol o un botón. Si existe una etiqueta HTML nativa para ese control, es mejor usarla.

Por qué es importante

El lector de pantalla (programa que lee en voz alta la pantalla) anuncia el tipo de cada elemento: «botón», «pestaña», «casilla». Con ese dato, la persona sabe qué puede hacer con él.

Un <div> con aspecto de pestaña se anuncia solo como texto. El usuario no sabe que puede activarlo ni cómo moverse por él. También afecta a quien maneja la web con la voz, con órdenes como «pulsar botón Buscar».

Cómo se hace

Use primero elementos HTML nativos: <button>, <a>, <select>. Ya traen su función y su manejo con teclado.
Si el componente es propio, añada un role definido en la especificación WAI-ARIA, como toolbar, tablist, tab, tree o treeitem.
No use roles abstractos, como widget o landmark. Son categorías internas de la especificación.
Elija el rol que describe lo que el componente hace, no lo que parece. Respete la estructura de cada rol: un tab va dentro de un tablist.
Programe el teclado. El atributo role solo cambia lo que se anuncia; no añade ningún comportamiento.
Complete el componente con un nombre y con los estados que necesita su rol (técnica ARIA5).

Cómo comprobarlo

Busque en el código los atributos role. Compruebe que su valor está en la lista de roles de WAI-ARIA y que está bien escrito, en minúsculas.
Compare el rol con lo que hace el componente. Por ejemplo, un enlace que lleva a otra página no debe llevar role="button".
Con las herramientas del navegador (F12, panel «Accesibilidad»), seleccione el componente y mire su «Role».
Recorra el componente con teclado y lector de pantalla. Debe oír el tipo correcto y poder manejarlo.

Ejemplo

Barra de herramientas de un editor de texto hecha con un contenedor genérico.

<div role="toolbar" aria-label="Formato del texto">
  <button type="button">Negrita</button>
  <button type="button">Cursiva</button>
  <button type="button">Subrayado</button>
</div>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA4 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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

Una barra de herramientas sencilla

Una barra de herramientas que contiene tres botones. El elemento div tiene el rol "toolbar" y los elementos img tienen el rol "button":

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

El patrón de barra de herramientas (Toolbar Pattern) de la guía de prácticas de autor ofrece un ejemplo funcional de barra de herramientas.

Un componente de árbol

Un componente de árbol básico. Obsérvese el uso de los roles "tree", "treeitem" y "group" para identificar el árbol y su estructura. Este es un extracto simplificado del código:

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

El patrón de vista en árbol (Tree View Pattern) de la guía de prácticas de autor ofrece un ejemplo funcional de árbol.

Pruebas

Procedimiento

Para un componente de la interfaz de usuario que usa el atributo role:

Comprobar que el valor del atributo role es uno de los roles no abstractos de entre los valores definidos en la especificación WAI-ARIA.
Comprobar que las características del componente de la interfaz de usuario se corresponden con la descripción del rol.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

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)

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA4 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.