Curso HTML 11.5 Introducción a ARIA (roles, aria-label, aria-labelledby, aria-describedby)

Introducción a ARIA

ARIA (Accessible Rich Internet Applications) es una especificación W3C que mejora la accesibilidad de las aplicaciones web dinámicas. Proporciona roles y atributos que permiten a las tecnologías asistivas (lectores de pantalla, lupas, etc.) interpretar mejor la finalidad y el estado de los elementos de la interfaz.

Los tres pilares de ARIA son:

Roles: describen la función de un elemento.
aria-label: define una etiqueta textual para un control.
aria-labelledby y aria-describedby: referencian uno o varios elementos cuyo texto debe usarse como etiqueta o descripción.

1. Roles ARIA

Los roles ARIA establecen la semántica del componente, especialmente cuando usamos contenedores <div> o <span> sin significado inherente. Existen roles para menús, diálogos, botones, pestañas, tablas, etc.

Rol	Propósito	Ejemplo de uso
button	Elemento interactivo de clic	<div role=’button’>Enviar</div>
navigation	Contenedor de enlaces de navegación	<nav role=’navigation’>…</nav>
alert	Mensaje de alerta que requiere atención inmediata	<div role=’alert’>¡Error al guardar!</div>
dialog	Ventana modal o cuadro de diálogo	<section role=’dialog’>…</section>
tablist, tab,tabpanel	Pestañas y su contenido	Conjunto de roles coordinados

Cada rol puede implicar propiedades y estados adicionales (aria-expanded, aria-pressed, aria-hidden, etc.) para describir comportamiento dinámico.

2. Atributo aria-label

aria-label proporciona una etiqueta accesible invisible en pantalla. Útil cuando el texto visible es insuficiente o inexistente.

Ejemplo: icono de búsqueda sin texto visible.

<button aria-label='Buscar productos' onclick='search()'>
  <svg width='16' height='16' aria-hidden='true'>
    <use href='#icon-search'></use>
  </svg>
</button>

En este caso, las tecnologías asistivas leerán “Buscar productos” en lugar de ignorar el botón por ausencia de texto.

3. Atributo aria-labelledby

En lugar de duplicar texto, aria-labelledby referencia uno o varios elementos que sirven de etiqueta. Útil para formularios o componentes compuestos.

Ejemplo: un campo de texto con etiqueta y un icono:

<div role='group'>
  <label id='lbl-correo'>Correo electrónico:</label>
  <input type='email' aria-labelledby='lbl-correo icon-info' />
  <span id='icon-info' aria-hidden='true'>ℹ️</span>
</div>

El lector de pantalla concatenará el texto del label y el del icono (si no usamos aria-hidden='true' en el icono), por eso ocultamos el icono mediante ese atributo.

4. Atributo aria-describedby

Similar a aria-labelledby, pero señala información complementaria o explicaciones más extensas. Ideal para describir ayudas, errores o pistas.

Ejemplo: campo con explicación y mensaje de error:

<div>
  <label id='lbl-password'>Contraseña:</label>
  <input type='password'
         id='pwd'
         aria-labelledby='lbl-password'
         aria-describedby='pwd-help pwd-error'>
  <small id='pwd-help'>Al menos 8 caracteres.</small>
  <div id='pwd-error' role='alert'>Debe incluir un número.</div>
</div>

El lector anunciará primero la etiqueta “Contraseña”, luego el texto de ayuda y finalmente el mensaje de error.

Buenas prácticas y consideraciones

No abuses de ARIA si el HTML nativo ya aporta semántica (botones, <nav>, <dialog>).
Usa aria-hidden='true' para ocultar elementos decorativos al lector de pantalla.
Mantén actualizados los atributos dinámicos (aria-expanded, aria-checked, etc.) cuando cambie el estado del componente.
Valida tu código con herramientas de accesibilidad (WAVE, axe, Lighthouse).

Una implementación correcta de ARIA mejora enormemente la experiencia de usuarios con discapacidades y garantiza una aplicación inclusiva y conforme a estándares.