ARIA

¿Qué es ARIA?

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que se pueden añadir a los elementos de HTML para mejorar su accesibilidad.

Los atributos ARIA incluyen información semántica para las tecnologías de apoyo y se dividen en roles, estados y propiedades.

Roles

El rol es un atributo que nos indica el tipo de objeto y su función. Existen principalmente dos tipos de roles: landmark y widget.

Landmark roles

Los landmarks o puntos de referencia indican la función de un área dentro de una página.

Ejemplo: el rol search identifica el conjunto de elementos que forman la búsqueda en el sitio web.

<form role="search">
  <input type="search" aria-label="Buscar">
  <button type="submit">Buscar</button>
</form>

Nota: Los elementos estructurales de HTML incluyen puntos de referencia, con lo cual la necesidad de utilizar atributos ARIA se ve reducida.

Widget roles

Indican la función de los componentes de la interfaz.

Ejemplo: el rol tablist indica que contiene una serie de elementos que permiten seleccionar el contenido de una pestaña.

<ul role="tablist">
  ...
</ul>

Estados

Los estados ARIA son atributos dinámicos que describen el estado actual de un elemento de la interfaz.

Ejemplo: el atributo aria-expanded indica si un elemento desplegable está abierto o cerrado.

<button aria-expanded="false">
  ...
</button>

Propiedades

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

Ejemplo: el atributo aria-label permite definir una etiqueta para describir un elemento.

<nav aria-label="Principal">
  ...
</nav>

Nota: Utiliza siempre el elemento HTML apropiado y añade atributos ARIA solo cuando sea realmente necesario.