Regla de accesibilidad: aria-hidden='true' no debe estar presente en el body del documento

Acerca de esta regla de accesibilidad

El atributo aria-hidden controla si un elemento y sus hijos están expuestos al árbol de accesibilidad — la estructura de datos que las tecnologías de asistencia utilizan para interpretar y presentar el contenido web. Cuando se establece como "true", el elemento y todos sus descendientes quedan ocultos para los lectores de pantalla y otras herramientas de asistencia. Aplicar este atributo al elemento <body> es catastrófico porque el <body> contiene todo el contenido visible de la página, lo que significa que nada en la página será anunciado o navegable para los usuarios de tecnologías de asistencia.

Este problema tiene un impacto crítico en los usuarios que son ciegos o tienen baja visión y dependen de lectores de pantalla. Mientras que los usuarios videntes pueden ver e interactuar con la página normalmente, los usuarios de lectores de pantalla experimentan una página completamente vacía. Los usuarios de teclado aún pueden ser capaces de tabular a elementos enfocables como enlaces y botones, pero el lector de pantalla permanecerá en silencio — sin proporcionar contexto sobre qué son esos elementos o qué contiene la página.

Esta regla se relaciona con dos criterios de éxito de nivel A de WCAG 2.0/2.1/2.2:

WCAG 1.3.1 (Información y relaciones): La estructura del contenido y las relaciones deben ser determinables programáticamente. Ocultar todo el body rompe este requisito porque ninguna información estructural llega a las tecnologías de asistencia.
WCAG 4.1.2 (Nombre, función, valor): Todos los componentes de la interfaz de usuario deben tener nombres y funciones accesibles. Cuando aria-hidden="true" está en el <body>, ningún componente puede comunicar su nombre, función o valor a las tecnologías de asistencia.

Cómo solucionarlo

La solución es sencilla: elimina el atributo aria-hidden="true" del elemento <body>.

Si aria-hidden="true" se añadió al <body> intencionalmente — por ejemplo, como parte de un patrón de diálogo modal — reestructura tu enfoque. En lugar de ocultar todo el body, oculta solo el contenido de fondo detrás del modal usando aria-hidden="true" en elementos wrapper hermanos, o utiliza el elemento <dialog> con el atributo inert en el contenido de fondo.

Aquí tienes algunas cosas importantes que debes tener en cuenta:

Nunca apliques aria-hidden="true" al elemento <body>. No existe un caso de uso válido para esto.
Usa aria-hidden="true" con moderación y solo en contenido no interactivo, decorativo o redundante que no proporcione valor a los usuarios de lectores de pantalla.
Ten cuidado con aria-hidden="false". No re-expone de manera confiable el contenido que ya está oculto mediante CSS (display: none, visibility: hidden) o el atributo HTML hidden. Siempre prueba exhaustivamente si dependes de este enfoque.

Ejemplos

Incorrecto: `aria-hidden="true"` en el body

Esto hace que toda la página sea inaccesible para las tecnologías de asistencia:

<body aria-hidden="true">
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is invisible to screen readers.</p>
  </main>
</body>

Correcto: Sin `aria-hidden` en el body

Simplemente elimina el atributo del elemento <body>:

<body>
  <header>
    <h1>Welcome to My Site</h1>
    <nav>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>This content is now accessible to everyone.</p>
  </main>
</body>

Correcto: Ocultar contenido de fondo detrás de un diálogo modal

Si tu intención original era ocultar el contenido de fondo mientras un modal está abierto, oculta el wrapper de fondo — no el <body>:

<body>
  <div id="page-wrapper" aria-hidden="true">
    <header>
      <h1>Welcome to My Site</h1>
    </header>
    <main>
      <p>Main page content hidden while modal is open.</p>
    </main>
  </div>
  <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
    <h2 id="dialog-title">Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <button>Yes</button>
    <button>Cancel</button>
  </div>
</body>

En este patrón, solo el #page-wrapper está oculto para las tecnologías de asistencia, mientras que el diálogo permanece completamente accesible. Recuerda eliminar aria-hidden="true" del wrapper cuando el diálogo se cierre.

Learn more: