La accesibilidad digital busca garantizar que todo usuario, independientemente de sus capacidades o dispositivos, pueda acceder a la información sin barreras. Sin embargo, un problema común ocurre cuando el contenido desaparece tras el redimensionamiento o redistribución de la pantalla, lo que incumple el Criterio de Conformidad 1.4.10: Reflow de WCAG 2.1.
Según estudios de accesibilidad, hasta un 71% de los usuarios con discapacidades visuales dependen del reflow para poder leer y navegar por los sitios web en dispositivos móviles.
Acerca de este fallo
Este error ocurre cuando ciertos elementos de una web desaparecen completamente al reducir el ancho de la ventana a 320px (el estándar para accesibilidad en dispositivos móviles).
Este problema suele darse en los siguientes casos:
- Un menú lateral o bloque de enlaces desaparece sin alternativa visible.
- Etiquetas de formularios se ocultan y solo dejan el placeholder (no accesible).
- Imágenes informativas desaparecen sin ofrecer una alternativa de acceso.
- Un campo de búsqueda global se oculta sin alternativa en el diseño adaptado.
Al desaparecer contenido esencial sin alternativa visible, se impide que los usuarios accedan a la información y funciones clave, afectando especialmente a personas con baja visión, usuarios con discapacidad motriz o quienes utilizan ampliadores de pantalla.
Ejemplos
Ejemplo incorrecto 1: Bloque de enlaces que desaparece al reducir la pantalla
<aside class=»sidebar»>
<ul>
<li><a href=»#»>Noticias</a></li>
<li><a href=»#»>Eventos</a></li>
<li><a href=»#»>Foro</a></li>
</ul>
</aside>
<style>
@media screen and (max-width: 320px) {
.sidebar {
display: none; /* ¡Error! Se oculta sin alternativa */
}
}
</style>
🔴 Problema: Al aplicarse el display: none;, el contenido desaparece sin ofrecer un acceso alternativo.
Solución correcta: Menú accesible con botón de expansión
<button id=»menu-toggle»>Menú</button>
<aside class=»sidebar» id=»menu»>
<ul>
<li><a href=»#»>Noticias</a></li>
<li><a href=»#»>Eventos</a></li>
<li><a href=»#»>Foro</a></li>
</ul>
</aside>
<style>
@media screen and (max-width: 320px) {
.sidebar {
display: none;
}
.sidebar.open {
display: block; /* Se muestra cuando el usuario lo activa */
}
}
</style>
<script>
document.getElementById(‘menu-toggle’).addEventListener(‘click’, function() {
document.getElementById(‘menu’).classList.toggle(‘open’);
});
</script>
✅ ¿Qué mejora?: Se oculta inicialmente, pero el usuario puede acceder mediante un botón.
Ejemplo incorrecto 2: Etiquetas de formularios que desaparecen
<label for=»nombre»>Nombre</label>
<input type=»text» id=»nombre» placeholder=»Escribe tu nombre»>
<style>
@media screen and (max-width: 320px) {
label {
display: none; /* ¡Error! Se oculta y deja solo el placeholder */
}
}
</style>
🔴 Problema: Los placeholders no reemplazan correctamente a las etiquetas, ya que desaparecen cuando el usuario empieza a escribir.
Solución correcta: Mantener etiquetas visibles en pantalla pequeña
<label for=»nombre» class=»visually-hidden»>Nombre</label>
<input type=»text» id=»nombre» placeholder=»Escribe tu nombre»>
<style>
.visually-hidden {
position: absolute;
left: -9999px;
}
</style>
✅ ¿Qué mejora?: La etiqueta se mantiene accesible para lectores de pantalla, mejorando la accesibilidad.
Ejemplo correcto: Solución ideal
Para evitar la desaparición de elementos en dispositivos con anchos reducidos, es recomendable usar un diseño responsivo donde el contenido se reorganice en lugar de ocultarse.
<header>
<h1>Mi Sitio Web</h1>
<nav>
<button id=»menu-toggle»>Menú</button>
<ul id=»menu» class=»menu»>
<li><a href=»#»>Inicio</a></li>
<li><a href=»#»>Servicios</a></li>
<li><a href=»#»>Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section class=»sidebar»>
<h2>Categorías</h2>
<ul>
<li><a href=»#»>Tecnología</a></li>
<li><a href=»#»>Accesibilidad</a></li>
<li><a href=»#»>Diseño Web</a></li>
</ul>
</section>
<section class=»content»>
<h2>Bienvenido</h2>
<p>Este es un sitio diseñado con accesibilidad y adaptación a dispositivos móviles.</p>
</section>
</main>
<style>
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #0056b3;
color: white;
}
nav ul {
list-style: none;
display: flex;
gap: 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
/* Diseño adaptativo */
@media screen and (max-width: 768px) {
.sidebar {
display: none; /* Oculta la barra lateral, pero no la elimina */
}
.content {
width: 100%; /* Asegura que el contenido se expanda */
}
/* Menú accesible con botón */
.menu {
display: none;
flex-direction: column;
background: #0056b3;
padding: 10px;
position: absolute;
top: 50px;
left: 0;
width: 100%;
}
.menu.open {
display: flex;
}
}
</style>
<script>
document.getElementById(‘menu-toggle’).addEventListener(‘click’, function() {
document.getElementById(‘menu’).classList.toggle(‘open’);
});
</script>
✅ ¿Qué mejora?:
- El contenido no desaparece, solo cambia su disposición en pantallas pequeñas.
- Se usa un menú desplegable accesible, en lugar de eliminar opciones de navegación.
- Se evita usar
display: none;en contenido esencial sin alternativa. - Compatible con lectores de pantalla y navegación por teclado.
Errores comunes y cómo evitarlos
Errores comunes:
- Usar
display: none;sin ofrecer una alternativa. - Ocultar imágenes sin proporcionar una alternativa textual.
- Eliminar formularios o botones en versión móvil sin reemplazo.
Cómo evitar estos errores
- Implementar menús desplegables o accesibles por teclado.
- Usar
alten imágenes esenciales o incluir enlaces alternativos. - Usar técnicas de diseño responsivo que mantengan la funcionalidad.
Preguntas frecuentes sobre el fallo común F102
¿Por qué es importante evitar este error?
Porque impide el acceso a contenido esencial cuando se usa reflow, afectando a personas con baja visión o usuarios en dispositivos móviles.
¿Puedo ocultar elementos en pantallas pequeñas?
Sí, pero siempre debes ofrecer una forma alternativa de acceso, como menús expandibles o enlaces adicionales.
¿El error solo ocurre en móviles?
No. También puede afectar a usuarios que amplían la pantalla al 400% en navegadores de escritorio.
¿Qué elementos suelen desaparecer en un mal diseño?
Menús, etiquetas de formularios, imágenes informativas y botones de búsqueda.
¿Cómo puedo probar si mi contenido desaparece?
Reduce la ventana del navegador a 320px o amplía el zoom al 400% y verifica si todo el contenido sigue disponible.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F102: Incumplimiento del Criterio de Conformidad 1.4.10 debido a que el contenido desaparece y no está disponible cuando el contenido ha redistribuido
- Comprender el criterio de éxito 1.4.10: Reflow
Pruebas y validación
Procedimiento
- Abre el sitio web en un navegador de escritorio con un ancho de 1280px.
- Reduce el ancho de la ventana a 320px o aumenta el zoom al 400%.
- Revisa si todos los elementos visibles en la versión grande siguen disponibles de alguna forma en la versión reducida.
- Si algo desaparece sin alternativa accesible, el contenido no cumple con WCAG 2.1.
Resultados esperados
✅ Si las pruebas confirman que:
- Todo el contenido sigue accesible tras el reflow, ya sea reposicionado o accesible mediante un widget.
- Se usan menús colapsables en lugar de eliminar secciones enteras.
- Las etiquetas de formularios siguen disponibles mediante técnicas accesibles.
Entonces, el contenido cumple con WCAG 2.1.
❌ Si alguno de los elementos anteriores no se cumple, el contenido falla el criterio 1.4.10 y debe corregirse.
Evitar que el contenido desaparezca con el reflow es clave para mejorar la accesibilidad. Implementar prácticas como menús desplegables, etiquetas visibles y técnicas responsivas garantizará que todos los usuarios puedan navegar sin problemas.
📢 ¿Tu web cumple con los estándares de accesibilidad? Si necesitas ayuda para mejorar la experiencia de tus usuarios, contáctanos y optimiza tu sitio para todos. 🚀