¿Qué es ARIA?
ARIA (Accessible Rich Internet Applications) es una especificación del W3C que define un conjunto de atributos HTML pensados para hacer accesibles los componentes web dinámicos: menús desplegables, pestañas, modales, autocompletados, sliders, árboles de navegación y formularios complejos.
Antes de ARIA, los lectores de pantalla solo podían interpretar elementos HTML semánticos básicos (<button>, <input>, <a>). Con ARIA podemos comunicar a los productos de apoyo el rol, el estado y las propiedades de cualquier elemento, incluidos los <div> o <span> que se han convertido 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:
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 en cualquier interfaz que vaya más allá de HTML estático. En cada proyecto de diseño web que entregamos, el ARIA se audita componente a componente con NVDA y axe-core para evitar la mala práctica más común: anunciar componentes que no funcionan o estados desincronizados con el DOM real.