Respuesta corta: ARIA es un conjunto de roles y atributos del W3C que les dice a las tecnologías de apoyo qué es un elemento y en qué estado está. Su primera regla es usar un elemento HTML nativo cuando haga el trabajo. Añade ARIA solo para lo que HTML no puede decir, y mantén sus estados al día.
Qué es ARIA
WAI-ARIA, siglas en inglés de Accessible Rich Internet Applications Suite, es un estándar del W3C. Define cómo hacer el contenido y las aplicaciones web más accesibles para las personas con discapacidad, sobre todo el contenido dinámico y los controles avanzados hechos con HTML y JavaScript.
MDN describe ARIA como un conjunto de roles y atributos que complementa a HTML. Sirve para pasar a las tecnologías de apoyo interacciones y componentes que HTML no puede describir, como componentes de JavaScript, pistas y errores de formularios o contenido que se actualiza.
ARIA cambia lo que se les dice a las tecnologías de apoyo, no cómo funciona un elemento. MDN advierte que, si usas ARIA, te toca reproducir con código el comportamiento que el navegador les da a los elementos nativos.
Qué añade ARIA a una página
| Parte | Qué les dice a las tecnologías de apoyo | Ejemplos del W3C |
|---|---|---|
| Roles de componentes | Qué tipo de control es un elemento | menu, treeitem, slider, progressbar |
| Roles de estructura | Cómo está organizada la página | Encabezados y regiones |
| Estados | En qué estado está un control | checked en una casilla, readonly en la mayoría de los campos |
| Regiones vivas | Partes de la página que se actualizan | Cotizaciones de bolsa |
Del resumen de WAI-ARIA del W3C, en inglés, consultado el 5 de noviembre de 2026.
MDN añade que algunos roles necesitan sus estados. Un elemento con role="checkbox" debe llevar también aria-checked, y el rol switch funciona como una casilla cuyos estados significan activado y desactivado.
Los nombres son un tema aparte; nuestra guía de aria-label explica de dónde sacan el suyo los elementos.
Las reglas de ARIA
El documento Using ARIA del W3C ya es un borrador descontinuado, pero conserva sus cuatro reglas como referencia. Para los patrones, el W3C remite a su guía de prácticas de autoría. La primera: si un elemento o atributo HTML nativo ya tiene el significado y el comportamiento que necesitas, úsalo en lugar de añadir ARIA. La segunda: no cambies la semántica nativa salvo que de verdad haga falta.
La tercera: todo control interactivo con ARIA debe funcionar con el teclado. Un elemento con role="button" tiene que recibir el foco y responder a Enter y a la barra espaciadora; nuestra guía de navegación con teclado explica cómo probarlo.
La cuarta: nunca pongas role="presentation" ni aria-hidden="true" en un elemento que recibe el foco. Nuestra guía de aria-hidden explica esa regla en detalle.
Cuando ARIA hace más daño que bien
Un rol equivocado le dice a quien usa un lector de pantalla que un elemento es lo que no es, y un estado sin actualizar describe mal el control. MDN lo resume con un dicho: «No utilizar ARIA es mejor que utilizar una mala ARIA».
El estudio de WebAIM de 2026 revisó el millón de páginas de inicio más visitadas. Encontró ARIA en el 82.7% de ellas, sin contar los roles de zona, frente al 79.4% un año antes. Las páginas con ARIA tenían 59.1 errores detectados de media, frente a 42 en las páginas sin ARIA.
WebAIM aclara que eso no prueba que ARIA causara los errores, porque esas páginas también eran más complejas. Aun así, cuanto más ARIA tenía una página, más errores solía tener.
Cómo usar ARIA en tu web
- Empieza por el elemento nativo: button, a, input, select, nav o progress.
- Añade un rol solo cuando ningún elemento HTML haga el trabajo.
- Dale a cada control propio los estados que pide su rol, como aria-checked o aria-expanded.
- Actualiza esos estados con código cada vez que el control cambie.
- Mantén igual la etiqueta de un interruptor o de un botón de alternar en los dos estados; si tiene que cambiar, usa un botón normal.
- Haz que cada control propio funcione con Tab, Enter y la barra espaciadora.
- Revisa el resultado en el árbol de accesibilidad del navegador y con un lector de pantalla; nuestra guía del lector de pantalla explica cómo.
Qué usan nuestras páginas
El 5 de noviembre de 2026 leímos dónde usan ARIA nuestras páginas, como una visita nueva: la de inicio y nuestra guía de navegación con teclado, en inglés y en español, en computadora y en teléfono. Casi todo sirve para ocultar iconos decorativos o para nombrar controles. La página de inicio lleva 39 elementos con aria-hidden y 17 con aria-label. Ningún elemento que recibe el foco estaba oculto ni marcado con role="none" o role="presentation".
Un control rompía una regla. Nuestro botón de tema claro y oscuro estaba marcado como interruptor, pero su nombre decía lo que iba a hacer y cambiaba con el tema. En una página clara, el árbol de accesibilidad les daba a los lectores de pantalla un interruptor llamado «Cambiar a modo oscuro» que estaba activado, con el modo oscuro desactivado.
Seguimos el patrón del W3C: si la etiqueta cambia, el botón no lleva estado. Quitamos el rol de interruptor y su estado de activado y desactivado, y dejamos el botón nativo con su nombre. Ahora el árbol muestra un botón: «Cambiar a modo oscuro» en el tema claro y «Cambiar a modo claro» en el oscuro. La página se ve exactamente igual que antes. Los tres interruptores de nuestras preferencias de cookies siguen siendo interruptores, porque sus nombres, como Analítica, no cambian nunca.
Antes de publicar
- Cada control es un elemento nativo, o tiene un rol, un nombre y uso con teclado.
- Ningún elemento que recibe el foco lleva aria-hidden="true" ni role="presentation".
- Los estados como aria-checked y aria-expanded cambian con el control.
- Los interruptores y los botones de alternar mantienen la misma etiqueta al activarse o desactivarse.
- Los iconos decorativos están ocultos para los lectores de pantalla.
- El árbol de accesibilidad muestra el rol y el nombre correctos de cada control.
RecuerdaUsa HTML primero. ARIA solo cambia lo que se les dice a las tecnologías de apoyo, así que cada rol y cada estado que añadas tiene que ser verdad.
Las páginas hechas así son parte de nuestro servicio de diseño web.
Respuestas rápidas sobre ARIA
¿Qué es ARIA?
ARIA, siglas de Accessible Rich Internet Applications, es un conjunto de roles y atributos del W3C. Les dice a las tecnologías de apoyo qué es un elemento y en qué estado está, para que un lector de pantalla pueda anunciar controles propios y contenido que cambia.
¿Qué son los roles de ARIA?
Un rol les dice a las tecnologías de apoyo qué es un elemento, como un menú, un control deslizante, una barra de progreso o una región de la página. Algunos roles necesitan además estados: MDN dice que un elemento con role="checkbox" debe llevar también aria-checked.
¿Cuáles son las reglas de ARIA?
El documento Using ARIA del W3C, que ya es un borrador descontinuado y se conserva como referencia, da cuatro. Usa un elemento HTML nativo cuando haga el trabajo, y no cambies la semántica nativa salvo que de verdad haga falta. Haz que todo control interactivo con ARIA funcione con el teclado. Nunca pongas role="presentation" ni aria-hidden="true" en un elemento que recibe el foco.
¿ARIA es malo para la accesibilidad?
No cuando cubre un hueco real, pero MDN repite el dicho «No utilizar ARIA es mejor que utilizar una mala ARIA». En el estudio de WebAIM de 2026 sobre un millón de páginas de inicio, las que usaban ARIA tenían 59.1 errores de media frente a 42. Eso sí, también eran más complejas.
¿Puede un interruptor cambiar su etiqueta al activarse?
No. Los patrones del W3C dicen que la etiqueta de un interruptor o de un botón de alternar no debe cambiar cuando cambia su estado. Si tu diseño cambia la etiqueta, como Silenciar y Activar sonido, usa un botón normal sin estado de activado o desactivado.
Fuentes
Consultadas el 5 de noviembre de 2026. MDN Web Docs: ARIA. En inglés: Iniciativa de Accesibilidad Web del W3C, WAI-ARIA Overview, Using ARIA, Button Pattern y Switch Pattern; MDN Web Docs, WAI-ARIA Roles; WebAIM, The WebAIM Million. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.