ARIA
ARIA define un conjunto de atributos HTML que contribuyen a que la interacción sea más accesible.
Contenido
¿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.