Estado Estado global

`aria-hidden`

Elimina un elemento y todos sus descendientes del árbol de accesibilidad. Los usuarios videntes siguen viendo el elemento; la tecnología de asistencia nunca accede a él. Resérvelo para contenido decorativo; no lo aplique nunca a un control enfocable.

Cuándo utilizarlo

En contenido decorativo que no aporta nada a los usuarios de lectores de pantalla: iconos que ya están junto a una etiqueta de texto, separadores, gráficos de fondo o texto duplicado que existe únicamente con fines de maquetación. Marcar esos elementos con aria-hidden="true" mantiene el árbol de accesibilidad centrado en el contenido significativo.

En comparación con mecanismos similares:

aria-hidden="true" — visible para los usuarios videntes, invisible para la tecnología de asistencia. El elemento continúa ocupando espacio en la maquetación.
CSS display: none y el atributo HTML hidden — invisible para todos (usuarios videntes y tecnología de asistencia). El elemento no se renderiza en absoluto.
CSS visibility: hidden — invisible para todos, pero el elemento sigue ocupando espacio en la maquetación.
El atributo inert — el elemento y sus descendientes no pueden recibir foco, los eventos de clic se suprimen, pero permanecen en el árbol de accesibilidad (a diferencia de aria-hidden). Es la herramienta adecuada para fondos de modales y pantallas que han sido enrutadas fuera.

De forma crítica, nunca aplique aria-hidden="true" a un elemento que sea —o contenga— un control enfocable. Los usuarios de teclado pueden seguir desplazándose hasta él con el tabulador, pero su lector de pantalla no lo anunciará. Llegan a un control que para ellos es invisible. Este es uno de los fallos más frecuentes detectados por axe-core.

Cómo mantenerlo sincronizado

Los valores válidos son "true", "false" y "undefined". El útil es "true"; "false" existe para anular un aria-hidden de un ancestro, algo que en la práctica casi nunca es necesario.

El estado puede ser estático (un icono que siempre es decorativo) o dinámico. Si alterna aria-hidden en una región —por ejemplo, ocultando la aplicación principal mientras hay un modal abierto—, sincronícelo con el estado visual real y combínelo con inert para que la región tampoco pueda recibir foco.

Errores frecuentes

aria-hidden="true" en un elemento enfocable: el problema más frecuentemente reportado por axe-core.
Usar aria-hidden para ocultar texto visible que no se desea que lean los lectores de pantalla. Elimine el texto o muévalo fuera del DOM.
Olvidar aria-hidden="true" en un icono puramente decorativo junto a un botón con etiqueta: el lector de pantalla anuncia el nombre accesible del icono además de la etiqueta del botón.
Establecer aria-hidden="true" en el elemento <body> o <main> para bloquear el contenido de fondo detrás de un modal sin usar también inert: el foco de teclado puede escapar igualmente.
Usar aria-hidden="false" para «mostrar» algo que el CSS oculta. El CSS lo sigue ocultando.

Ejemplo

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Guardar
</button>