WAI-ARIA

WAI-ARIA define un conjunto de atributos que contribuyen a que la interacción en la Web sea más accesible.

Roles

Un rol es un atributo que nos indica el tipo de objeto y su función en una página.

Existen principalmente dos tipos de roles:

• landmarks: indican las principales regiones de una página.
• widgets: definen elementos de la interfaz.

Landmarks

Los landmark roles o puntos de referencia, definen la estructura de una página identificando las principales áreas de la misma.

Los landmark roles son:

• banner: una región con contenido orientado al sitio en general, normalmente es la cabecera de la página e incluye el logo o el nombre del sitio.
• complementary: una sección con información complementaria, pero que sigue siendo significativa cuando se separa del contenido principal.
• contentinfo: contiene información sobre el documento, normalmente es el pie de página.
• form: contiene una colección de elementos y objetos que se combinan para crear un formulario (en caso de un formulario de búsqueda se usa search).
• main: indica el contenido principal de una página.
• navigation: es una colección de elementos de navegación (generalmente enlaces).
• region: identifica una sección relevante de la página, que no puede describirse con ningún otro landmark.
• search: identifica los elementos que forman la herramienta de búsqueda del sitio.

Landmarks duplicados

Cuando en una página existen varias áreas con el mismo rol, es recomendable identificarlas con un título HTML o con una propiedad ARIA.

Ejemplo: Identificación de elementos de navegación con ‘aria-label’.

<nav aria-label="Menú principal">
...
</nav>
<nav aria-label="Menú secundario">
...
</nav>

Widgets

Los widget roles proporcionan información semántica sobre los componentes de la interfaz.

Ejemplo: rol alert en un aviso de formulario.

<h2 role="alert">El formulario no puede ser enviado debido a 2 errores de validación.</h2>

Nota: Puedes consultar una lista completa de roles en WAI-ARIA 1.1.

Además de los roles, la especificación WAI-ARIA incluye otros dos tipos de atributos: estados y propiedades.

Estados

Los estados describen el estado actual de un elemento de la interfaz.

Algunos ejemplos de estados son:

• aria-checked
• aria-expanded
• aria-disabled
• aria-hidden

Propiedades

Las propiedades describen la función o características de un elemento de la interfaz.

Algunos ejemplos de propiedades son:

• aria-label
• aria-labelledby
• aria-controls
• aria-haspopup

Nota: Puedes consultar una lista completa de estados y propiedades en la especificación WAI-ARIA 1.1.

Atributos estáticos y dinámicos

Los atributos estáticos son los que pueden escribirse directamente en el HTML y no suelen cambiar. Los landmarks y roles son atributos estáticos. Algunas propiedades también son estáticas, como por ejemplo aria-label o aria-describedby.

Los estados, en cambio, suelen ser dinámicos, ya que informan del estado actual de un elemento y dependen de la interacción con el usuario. Por ejemplo, aria-checked o aria-expanded son atributos dinámicos.