WAI-ARIA

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

WAI-ARIA añade información semántica al código HTML. Por ejemplo, en el caso de un menú desplegable, los atributos ARIA indican a las tecnologías asistivas si se encuentra abierto o cerrado.

WAI-ARIA divide la semántica en roles, junto a sus respectivos estados y propiedades.

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 y widgets.

Landmarks

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

Lista de los landmark roles:

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

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.

Estados

Los estados describen el estado actual de un elemento de la interfaz. Son atributos dinámicos, ya que dependen de la interacción con el usuario.

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. Son atributos estáticos, que pueden escribirse directamente en el HTML y no suelen cambiar, aunque existen excepciones.

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.