Respuesta corta: aria-hidden="true" oculta un elemento y todo lo que contiene a los lectores de pantalla, mientras sigue viéndose en pantalla. Úsalo para iconos decorativos, texto repetido y menús cerrados. Nunca lo pongas en un enlace, un botón o un campo de formulario, ni en algo que contenga uno.
Qué hace aria-hidden
Añadir aria-hidden="true" a un elemento lo quita, junto con todos sus hijos, del árbol de accesibilidad, la versión de la página que usan los lectores de pantalla. No oculta nada a la vista.
MDN da tres usos típicos: el contenido puramente decorativo, como iconos o imágenes; el contenido duplicado, como un texto repetido; y el contenido fuera de pantalla o plegado, como los menús. Si ocultas el icono de un botón que no tiene texto, nuestra guía de aria-label explica cómo darle nombre al botón.
| Método | Oculto al lector de pantalla | Oculto en pantalla |
|---|---|---|
| aria-hidden="true" | Sí, con todos sus hijos | No |
| El atributo hidden | Sí | Sí |
| CSS display: none o visibility: hidden | Sí | Sí |
| role="presentation" o role="none" | Solo su significado, su contenido sigue expuesto | No |
De la página de MDN sobre aria-hidden, en inglés, consultada el 4 de noviembre de 2026.
La regla de los elementos con foco
No uses aria-hidden="true" en un elemento que puede recibir el foco. El documento «Using ARIA» del W3C lo llama la cuarta regla del uso de ARIA: algunas personas acabarían con el foco en «nada». Nuestra guía de qué es ARIA repasa las cuatro reglas.
La regla también vale para los elementos padre. El atributo lo heredan los hijos de un elemento, así que un contenedor oculto oculta cada enlace y cada botón que tenga dentro. Poner aria-hidden="false" en un hijo no lo devuelve.
Nuestra guía de navegación con teclado explica cómo recorrer una página con Tab y detectar una parada que no lleva a nada.
Ocultar lo que la gente ve
MDN pide ocultar contenido visible solo cuando quitas algo redundante o sobrante para quien usa un lector de pantalla, y solo si el mismo significado llega por otra vía.
No todas las personas que usan un lector de pantalla son ciegas. Si lo que alguien ve no coincide con lo que dice el lector, la página se vuelve más difícil de usar. Y cuando el atributo hidden, display: none o visibility: hidden ya ocultan un elemento o a uno de sus padres, aria-hidden sobra.
Nuestra guía del texto alternativo explica cómo describir las imágenes que sí dicen algo.
Cómo usar aria-hidden, paso a paso
- Haz una lista de los iconos, flechas y separadores decorativos de tus plantillas.
- Añade aria-hidden="true" a cada uno cuyo significado ya esté en un texto cercano.
- Oculta el contenido duplicado, como una segunda copia del mismo texto.
- Oculta los menús y paneles mientras están cerrados, y quita aria-hidden cuando se abren.
- Nunca lo pongas en un enlace, un botón o un campo, ni en algo que contenga uno.
- No lo añadas donde el atributo hidden o display: none ya ocultan el elemento.
- Recorre la página con Tab y escúchala con un lector de pantalla para comprobar que no falta nada.
Cómo usamos aria-hidden en nuestra web
El 4 de noviembre de 2026 leímos 10 de nuestras páginas en un navegador, a un ancho de escritorio y a uno de teléfono. Entre todas llevan 660 elementos con aria-hidden="true", y ninguno recibe el foco ni contiene nada que lo reciba. Ninguna página oculta su cuerpo entero.
En nuestra página de inicio, entre ellos están las flechas de los enlaces a servicios y los iconos del menú de servicios. También los iconos de sol y luna del selector de tema y el menú del teléfono mientras está cerrado.
Su significado está en el texto del enlace, en las etiquetas del menú y en el nombre del propio selector. El menú del teléfono pierde aria-hidden en cuanto se abre y lo recupera al cerrarse.
Antes de publicar
- Los iconos y flechas decorativos están ocultos al lector de pantalla.
- Su significado está en el texto del enlace o en una etiqueta.
- Ningún enlace, botón o campo está dentro de un elemento oculto.
- Los menús cerrados están ocultos y vuelven al abrirse.
- Ningún elemento usa aria-hidden="false" para anular un padre oculto.
- Los elementos ocultos con display: none no llevan también aria-hidden.
Recuerdaaria-hidden oculta el contenido solo a los lectores de pantalla. Úsalo para lo que mete ruido, nunca para algo en lo que la gente pueda hacer clic, escribir o llegar con Tab.
El marcado accesible es parte de nuestro servicio de diseño web, y nuestra guía del verificador de accesibilidad explica las herramientas que lo prueban.
Respuestas rápidas sobre aria-hidden
¿Qué hace aria-hidden="true"?
Quita el elemento y todo lo que contiene del árbol de accesibilidad, así que los lectores de pantalla se lo saltan. El elemento sigue viéndose en pantalla. MDN da como usos típicos los iconos decorativos, el texto repetido y los menús cerrados.
¿aria-hidden oculta el contenido a la vista?
No. Solo lo oculta a la tecnología de asistencia. Para ocultar algo a todo el mundo, usa el atributo hidden o CSS como display: none, que ya lo quitan también del árbol de accesibilidad.
¿Puedo poner aria-hidden en un botón o en un enlace?
No. El documento «Using ARIA» del W3C pide no usarlo en un elemento que recibe el foco, porque algunas personas acabarían con el foco en «nada». Lo mismo vale para cualquier elemento que contenga un botón, un enlace o un campo de formulario.
¿Qué diferencia hay entre aria-hidden y role="presentation"?
aria-hidden="true" quita el elemento entero de la API de accesibilidad. role="presentation" o role="none" solo le quita el significado, y su contenido sigue llegando a la tecnología de asistencia.
¿aria-hidden="false" vuelve a mostrar el contenido oculto?
No si un elemento padre tiene aria-hidden="true". MDN recuerda que el atributo lo heredan los hijos de un elemento, así que el valor false en un hijo no lo devuelve.
Fuentes
Consultadas el 4 de noviembre de 2026, en inglés: la página de MDN no tiene versión en español. MDN Web Docs: ARIA: aria-hidden attribute. W3C: Using ARIA. Nuestro caso: nuestras propias páginas, leídas en un navegador el 4 de noviembre de 2026.