Regla de accesibilidad: El contenido oculto en la página debería ser analizado

Acerca de esta regla de accesibilidad

Esta regla es una validación informativa más que una prueba de aprobado/suspenso. Identifica elementos cuyo contenido está oculto tanto para usuarios videntes como para tecnologías de asistencia, lo que significa que herramientas automatizadas como axe no pueden inspeccionar ese contenido en busca de problemas. El objetivo es asegurar que no pases por alto contenido potencialmente inaccesible simplemente porque no está visible en ese momento.

Por qué esto es importante

Cuando el contenido se oculta usando propiedades CSS como display: none o visibility: hidden, se elimina completamente del árbol de accesibilidad. Esto significa que los lectores de pantalla no pueden acceder a él, y las herramientas de pruebas automatizadas no pueden evaluarlo. Si ese contenido oculto se revela posteriormente — a través de interacción del usuario, alternancia con JavaScript, o media queries — debe ser completamente accesible cuando se vuelve visible.

Varios grupos de usuarios pueden verse afectados por contenido oculto inaccesible:

Usuarios de lectores de pantalla pueden encontrar contenido que carece de etiquetas apropiadas, encabezados, o estructura semántica una vez que se revela.
Usuarios que solo usan teclado pueden encontrar que el contenido revelado contiene trampas de foco o elementos que no son operables con teclado.
Usuarios con baja visión o daltonismo pueden encontrar problemas de contraste o estilo en contenido que nunca fue probado porque estaba oculto durante el análisis.

Si hay una razón convincente para ocultar contenido de usuarios videntes, generalmente hay una razón igualmente convincente para ocultarlo también de usuarios de lectores de pantalla. Por el contrario, cuando el contenido está disponible para usuarios videntes, también debería estar disponible para usuarios de tecnologías de asistencia.

Esta regla se alinea con las mejores prácticas de Deque para pruebas de accesibilidad exhaustivas. Aunque no se corresponde con un criterio de éxito específico de las WCAG, no revisar el contenido oculto podría enmascarar violaciones de criterios como 1.1.1 Contenido no textual, 1.3.1 Información y relaciones, 2.1.1 Teclado, 4.1.2 Nombre, función, valor, y muchos otros.

Cómo solucionarlo

Cuando axe marca contenido oculto, necesitas:

Identificar los elementos ocultos reportados por la regla.
Activar su visualización — interactúa con la página para hacer visible el contenido (p. ej., abrir un modal, expandir un acordeón, hacer hover sobre un tooltip).
Ejecutar validaciones de accesibilidad nuevamente en el contenido ahora visible.
Corregir cualquier problema encontrado en ese contenido, igual que harías con cualquier elemento visible.
Verificar que la técnica de ocultación es apropiada — asegúrate de que el contenido oculto con display: none o visibility: hidden realmente debe estar oculto de todos los usuarios, incluyendo usuarios de tecnologías de asistencia.

Si quieres que el contenido esté oculto visualmente pero siga siendo accesible para lectores de pantalla, usa una técnica CSS de ocultación visual en lugar de display: none o visibility: hidden.

Ejemplos

Contenido oculto que no puede ser analizado

Este contenido está completamente oculto de todos los usuarios y herramientas automatizadas:

<div style="display: none;">
  <img src="chart.png">
  <p>Los ingresos trimestrales aumentaron un 15%.</p>
</div>

El elemento img interno puede que no tenga un atributo alt, pero axe no puede detectar esto porque todo el div está oculto. Debes revelar este contenido y probarlo por separado.

Contenido oculto revelado para pruebas y corregido

Una vez que el contenido se hace visible, puedes identificar y corregir problemas:

<div style="display: block;">
  <img src="chart.png" alt="Gráfico de barras que muestra que los ingresos trimestrales aumentaron un 15%">
  <p>Los ingresos trimestrales aumentaron un 15%.</p>
</div>

Usando `visibility: hidden`

<nav style="visibility: hidden;">
  <a href="/home">Inicio</a>
  <a href="/about">Acerca de</a>
</nav>

Esta navegación está oculta para todos. Si se vuelve visible a través de una interacción con JavaScript, asegúrate de que sea probada en ese estado visible.

Oculto visualmente pero accesible para lectores de pantalla

Si quieres contenido oculto visualmente pero que siga disponible para tecnologías de asistencia, no uses display: none o visibility: hidden. Usa una clase de ocultación visual en su lugar:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<button>
<!-- icono -->
</svg>
  <span class="visually-hidden">Cerrar menú</span>
</button>

Este enfoque mantiene el texto accesible para lectores de pantalla mientras lo oculta visualmente. Axe aún puede analizar este contenido porque permanece en el árbol de accesibilidad.

Contenido interactivo que alterna visibilidad

Cuando el contenido se alterna dinámicamente, asegúrate de que ambos estados sean probados:

<button aria-expanded="false" aria-controls="panel1">Mostrar detalles</button>
<div id="panel1" style="display: none;">
  <p>Los detalles adicionales del producto van aquí.</p>
</div>

<script>
  const button = document.querySelector('button');
  const panel = document.getElementById('panel1');
  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', String(!expanded));
    panel.style.display = expanded ? 'none' : 'block';
  });
</script>

Para probar esto completamente, haz clic en el botón para revelar el contenido del panel, luego ejecuta tu análisis de accesibilidad nuevamente para validar el contenido revelado en busca de cualquier violación.

Learn more: