¿Qué es ARIA?
ARIA (Accessible Rich Internet Applications) es un conjunto de atributos definidos por la W3C que permite enriquecer la semántica de los elementos HTML cuando el lenguaje nativo no es suficiente para describir su función o estado. Estos atributos se añaden directamente al markup y son interpretados por las tecnologías de asistencia, como lectores de pantalla, para ofrecer una experiencia más comprensible a personas con discapacidades visuales, motoras o cognitivas.
¿Por qué es importante ARIA?
Aunque HTML5 ha incorporado muchos elementos semánticos, todavía existen componentes de interfaz complejos (menús desplegables, pestañas, sliders, diálogos modales, etc.) que no tienen un equivalente nativo claro. ARIA cubre esas brechas, permitiendo que los desarrolladores indiquen explícitamente el rol, las propiedades y el estado de esos componentes. Sin ARIA, los usuarios de tecnologías de asistencia podrían quedar perdidos, incapaz de entender qué hacen ciertos controles o cómo interactuar con ellos.
Principales roles de ARIA
- role=»button»: indica que un elemento se comporta como un botón, útil cuando se usa un
<div>o<span>como control interactivo. - role=»checkbox»: define un elemento como una casilla de verificación.
- role=»radio»: representa un botón de opción dentro de un grupo.
- role=»tablist», role=»tab», role=»tabpanel»: estructuran un conjunto de pestañas y sus paneles asociados.
- role=»dialog» y role=»alertdialog»: señalan ventanas modales que requieren atención inmediata.
- role=»navigation»: marca regiones de navegación principal.
- role=»complementary»: indica contenido complementario, como barras laterales.
Atributos de estado y propiedades
- aria‑checked: true, false o mixed, refleja el estado de casillas y botones de opción.
- aria‑expanded: true o false, indica si un elemento desplegable está abierto o cerrado.
- aria‑hidden: true elimina el elemento del árbol de accesibilidad; útil para contenido decorativo que no debe ser anunciado.
- aria‑label y aria‑labelledby: proporcionan una etiqueta accesible cuando el elemento no tiene texto visible.
- aria‑describedby: asocia una descripción adicional al elemento.
- aria‑live: define regiones dinámicas; valores como polite, assertive o off controlan cuándo se anuncian los cambios.
- aria‑controls: indica qué elemento es controlado por el actual (por ejemplo, un botón que abre un panel).
Buenas prácticas al usar ARIA
- Usar HTML nativo siempre que sea posible: ARIA es un complemento, no un sustituto. Un
<button>ya tiene el rol adecuado y manejo de teclado. - No duplicar roles: si un elemento ya tiene un rol implícito (como
<header>con role=»banner»), no añada ARIA que lo contradiga. - Mantener la coherencia de estado: cada vez que cambie el estado visual de un componente, actualice el atributo ARIA correspondiente (por ejemplo, aria‑expanded al abrir/cerrar un menú).
- Proveer soporte de teclado: ARIA no sustituye la necesidad de que los componentes sean operables mediante teclado (tab, enter, space, flechas).
- Probar con lectores de pantalla: herramientas como NVDA, VoiceOver o JAWS revelan si la información transmitida es la esperada.
- Evitar aria‑hidden en contenido interactivo: ocultar accidentalmente un botón o enlace puede hacer que sea inaccesible.
Ejemplo práctico: menú desplegable accesible
<nav>
<ul role="menubar">
<li role="none">
<button aria-haspopup="true" aria-expanded="false" aria-controls="submenu-1">
Producto
</button>
<ul role="menu" id="submenu-1" hidden>
<li role="none"><a role="menuitem" href="/productos/a">Producto A</a></li>
<li role="none"><a role="menuitem" href="/productos/b">Producto B</a></li>
</ul>
</li>
</ul>
</nav>
En este ejemplo, el botón usa aria-haspopup para señalar que controla un menú emergente, aria-expanded refleja su estado abierto/cerrado y aria-controls enlaza con el submenú. El submenú tiene role=»menu» y cada opción role=»menuitem». Cuando se muestra u oculta el submenú mediante JavaScript, se actualiza aria-expanded y se cambia el atributo hidden.
ARIA y WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 y 2.2 consideran a ARIA como una técnica suficiente para cumplir varios criterios de éxito, especialmente aquellos relacionados con componentes de interfaz complejos y contenido dinámico. Sin embargo, pasar una auditoría de accesibilidad no depende únicamente de agregar atributos ARIA; se requiere una combinación de buen HTML, CSS manejable y JavaScript respetuoso.
Conclusión
ARIA es una herramienta poderosa que, cuando se emplea con juicio, mejora significativamente la accesibilidad de aplicaciones web modernas. Conocer sus roles, estados y propiedades, así como seguir las mejores prácticas de uso, permite crear interfaces que sean utilizables por la mayor cantidad posible de personas, independientemente de sus habilidades. Recuerda siempre probar con usuarios reales y tecnologías de asistencia para validar que la experiencia sea realmente inclusiva.
