Contenido oculto

¿Qué es contenido oculto?

El contenido oculto es contenido que existe en el DOM pero no es visible visualmente. Hay diferentes formas de ocultar contenido, y algunas son accesibles para lectores de pantalla mientras que otras no.

Técnicas de ocultamiento

Accesible para lectores de pantalla

/* Técnica de solo visualmente oculto */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

No accesible (oculto completamente)

/* Oculto para todos */
.oculto {
  display: none; /* No accesible */
  visibility: hidden; /* No accesible */
}

Relación con WCAG 2.1

El Criterio 1.3.1 (Información y Relaciones) requiere que la información, estructura y relaciones transmitidas mediante presentación puedan determinarse programáticamente. El contenido oculto accesible puede ayudar a proporcionar contexto adicional.

Ejemplos prácticos

✅ Correcto: Texto oculto accesible

<!-- Texto adicional para lectores de pantalla -->
<button>
  <span class="sr-only">Abrir menú de navegación</span>
  <span aria-hidden="true">☰</span>
</button>

✅ Correcto: Ocultar decoración

<!-- Icono decorativo oculto para lectores de pantalla -->
<span aria-hidden="true">🎉</span>
<span>¡Felicitaciones!</span>

❌ Incorrecto: Ocultar información importante

<!-- Información importante oculta visualmente pero no accesible -->
<div style="display: none;">
  <p>Este mensaje de error es importante pero está oculto</p>
</div>

❌ Incorrecto: Usar aria-hidden en contenido importante

<!-- Contenido importante marcado como oculto para lectores de pantalla -->
<div aria-hidden="true">
  <h2>Información importante</h2>
  <p>Este contenido no será leído por lectores de pantalla</p>
</div>

Errores comunes

1. Ocultar información importante: Usar display:none en contenido que debe ser accesible
2. aria-hidden en contenido relevante: Marcar contenido importante como oculto
3. No proporcionar alternativa: Ocultar contenido sin alternativa accesible
4. Ocultar solo visualmente incorrectamente: Técnicas que no funcionan en todos los casos
5. Confundir ocultamiento visual con accesibilidad: Asumir que oculto = no accesible

Buenas prácticas

• Usar .sr-only para texto adicional: Para información solo para lectores de pantalla
• Usar aria-hidden para decoración: Para iconos y elementos puramente visuales
• No ocultar información importante: Si es importante, debe ser accesible
• Probar con lectores de pantalla: Verificar que el contenido oculto funciona como se espera
• Documentar decisiones: Explicar por qué se oculta contenido

Términos relacionados

• [[Texto solo para lectores de pantalla]]
• [[aria-hidden]]
• [[WCAG 2.1]]
• [[Criterio 1.3.1]]