ARIA

¿Qué es ARIA?

ARIA (Accessible Rich Internet Applications) define un conjunto de atributos que pueden añadirse al HTML para mejorar la accesibilidad, especialmente en interfaces web interactivas y con contenido dinámico.

Los atributos ARIA proporcionan información semántica adicional para las tecnologías de asistencia, como lectores de pantalla. Se dividen en tres categorías:

• Roles
• Estados
• Propiedades

ARIA no cambia el aspecto visual ni el comportamiento por defecto de los elementos, pero sí influye en cómo se presentan a los usuarios que dependen de tecnologías de asistencia.

Roles

Los roles ARIA indican el tipo o función de un elemento en la interfaz. Son atributos semánticos que ayudan a definir la estructura y propósito de los elementos.

Roles widget

Los roles más comunes en el desarrollo web son los widget roles, que describen componentes interactivos.

Ejemplo: el rol tablist indica que el elemento contiene un conjunto de pestañas.

<ul role="tablist">
  <li role="tab">Pestaña 1</li>
  <li role="tab">Pestaña 2</li>
</ul>

Usa roles solo cuando no haya un elemento HTML nativo adecuado. Por ejemplo, en lugar de role="button", es preferible usar un <button>.

Estados

Los estados ARIA describen el estado actual de un componente de la interfaz. Son atributos dinámicos que pueden cambiar en respuesta a la interacción del usuario y deben actualizarse mediante JavaScript.

Ejemplo: aria-expanded indica si un panel o menú está expandido o contraído.

<button aria-expanded="false" aria-controls="contenido">
  Mostrar contenido
</button>
<div id="contenido" hidden>
  ...
</div>

Asegúrate de que los estados se actualicen correctamente cuando cambia la interfaz, de lo contrario, pueden confundir a los usuarios.

Propiedades

Las propiedades ARIA describen características adicionales de un elemento o su relación con otros elementos.

Ejemplo: aria-label proporciona una etiqueta textual alternativa que las tecnologías de asistencia pueden anunciar.

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

Uso de ARIA

Buenas prácticas al usar los atributos ARIA:

• Utiliza HTML semántico siempre que sea posible. Usa elementos nativos como <button>, <nav>, <form>, etc., antes de recurrir a ARIA.
• Usa ARIA como mejora progresiva, no como sustituto del HTML bien estructurado.
• Prueba con tecnologías de asistencia, como lectores de pantalla, para verificar el impacto real de los atributos.