ARIA
ARIA define un conjunto de atributos HTML que contribuyen a que la interacción sea más accesible.
¿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 o 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.
Los elementos estructurales de HTML incluyen puntos de referencia, con lo cual se reduce la necesidad de utilizar atributos ARIA.
Algunos autores consideran una buena práctica añadir el rol correspondiente al elemento semántico aunque se trate de información redundante.
<header role="banner">...</header>
Widget roles
Indican la función de los componentes de la interfaz.
Ejemplo: el rol tablist identifica el elemento que contiene un conjunto de pestañas.
<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 las características de un elemento de la interfaz o su relación con otros elementos.
Ejemplo: el atributo aria-label permite definir una etiqueta para describir un elemento.
<nav aria-label="Principal">...</nav>
Uso de atributos ARIA
En la mayoría de casos, si utilizas el elemento HTML apropiado, no necesitas añadir atributos ARIA.
Evita la redundancia y utiliza ARIA sólo cuando sea necesario para ayudar a las tecnologías de asistencia.