¿Qué es ARIA?
ARIA (Accessible Rich Internet Applications) es una especificación del W3C. Define un conjunto de atributos HTML que hacen accesibles los componentes web dinámicos.
Sirve para menús desplegables, pestañas, modales, autocompletados, sliders, árboles de navegación y formularios complejos.
Antes de ARIA, los lectores de pantalla solo interpretaban elementos HTML semánticos básicos: <button>, <input> o <a>.
Con ARIA podemos comunicar a los productos de apoyo el rol, el estado y las propiedades de cualquier elemento. Incluso de los <div> o <span> convertidos en widgets interactivos mediante JavaScript.
Tres tipos de atributos
- Roles (
role="..."): definen qué tipo de componente es. Ejemplos:role="button",role="dialog",role="navigation",role="alert". - Estados (
aria-...): describen el estado actual del componente. Ejemplos:aria-expanded="true",aria-checked="false",aria-disabled="true",aria-hidden="true". - Propiedades (
aria-...): describen características del componente. Ejemplos:aria-label="Cerrar menú",aria-labelledby="title-id",aria-describedby="help-id",aria-haspopup="true".
La regla de oro de ARIA
No usar ARIA es mejor que usar ARIA mal. — WAI-ARIA Authoring Practices
Siempre que exista un elemento HTML semántico nativo equivalente, hay que usarlo.
ARIA no añade comportamiento. No convierte un <div> en un botón a efectos de foco, teclado o eventos. Solo lo anuncia como botón al lector de pantalla.
Por eso un <button> real es casi siempre mejor que un <div role="button">.
Ejemplo en smedialab.es
En el mega-menú “Servicios” del Header usamos estos atributos:
aria-label="Principal"en el<nav>para que NVDA lo anuncie como “Navegación principal”.aria-haspopup="true"en el botón que abre el panel.aria-expanded="true|false"sincronizado con el estado hover/focus por JavaScript.aria-hidden="true"en los iconos SVG decorativos, para que el lector de pantalla no los lea como contenido.
Por qué nos importa
ARIA es imprescindible para cumplir WCAG 2.1 nivel AA. Aplica a cualquier interfaz que vaya más allá de HTML estático.
En cada proyecto de diseño web auditamos el ARIA componente a componente, con NVDA y axe-core.
Así evitamos la mala práctica más común: anunciar componentes que no funcionan o estados desincronizados con el DOM real.