1.4.10 Reflujo
Criterio de éxito oficial
El contenido puede presentarse sin pérdida de información o funcionalidad y sin necesidad de desplazarse en dos dimensiones para: contenido de desplazamiento vertical a un ancho equivalente a 320 píxeles CSS; contenido de desplazamiento horizontal a una altura equivalente a 256 píxeles CSS. Excepto para las partes del contenido que requieren un diseño bidimensional para su uso o significado.
¿Qué es?
El contenido web debe ajustarse dinámicamente a diferentes tamaños de pantalla o niveles de zoom. Esto significa que los usuarios nunca deben verse obligados a desplazarse en dos direcciones (horizontal y vertical) para leer o interactuar con el contenido. WCAG 1.4.10 exige que el contenido sea utilizable sin desplazamiento horizontal con un ancho de ventana gráfica de 320 píxeles CSS.
Reflujo en acción
Un diseño bien construido se redistribuye de múltiples columnas a una sola columna a medida que el espacio se reduce:
Escritorio — 1280 px
Tableta — 768 px
Móvil — 320 px
Sin reflujo vs. con reflujo al ampliar
✗ Zoom 400% — Sin reflujo
✓ Zoom 400% — Con reflujo
¿Por qué importa?
Cuando el contenido no se redistribuye, los usuarios con baja visión que amplían el texto pueden tener que desplazarse horizontalmente por cada línea, lo que es agotador y confuso. El esfuerzo físico y cognitivo de ir y venir entre el inicio y el final de cada línea es enorme.
¿Quién se ve afectado?
Baja visión
Necesitan ampliar el texto para verlo. Sin reflujo, el contenido ampliado se desborda y obliga a desplazarse horizontalmente línea por línea.
Dispositivos móviles
El reflujo garantiza que el contenido se ajuste a pantallas pequeñas sin zoom ni scroll excesivo.
Discapacidad motora
El desplazamiento horizontal requiere movimientos precisos y es mentalmente agotador. El reflujo elimina esta barrera.
Cómo implementarlo
1. Diseño web adaptable con media queries
/* Reflujo a una columna en ventanas pequeñas */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
img {
max-width: 100%;
height: auto;
}
}2. Gestión de desbordamiento
/* Palabras largas (URLs) se parten */
.content {
overflow-wrap: break-word;
word-break: break-word;
}
/* Tablas con scroll propio — no rompen el layout */
.table-wrapper {
overflow-x: auto;
}3. Layouts flexibles
/* Flexbox con wrap */
.nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
/* Grid auto-ajustable */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}position: static o añade un botón para ocultarlas.
Excepciones: contenido bidimensional
Algunos tipos de contenido requieren un diseño bidimensional y están exentos del requisito de reflujo:
Tablas de datos
Relación bidimensional filas/columnas
Mapas
Exploración espacial bidimensional
Vídeos
Contenido de dimensión fija
Juegos
Interacción espacial
Presentaciones
Diseño de diapositivas fijo
Barras de herramientas
Necesitan estar visibles al editar
overflow-x: auto.
Ejemplos prácticos
Correcto — Sitio de noticias con diseño responsivo
Las secciones se apilan en una sola columna al ampliar al 400%. La navegación se oculta tras un menú hamburguesa. Toda la información sigue disponible sin scroll horizontal.
Correcto — Tabla en contenedor con scroll propio
La tabla con muchas columnas tiene su propio overflow-x: auto (excepción permitida), pero los párrafos antes y después se redistribuyen correctamente a 320 px.
Incorrecto — Layout fijo que no se redistribuye
Sitio con width: 1200px fijo: al hacer zoom al 400%, el contenido se extiende más allá de la ventana y el usuario debe desplazarse horizontalmente por cada línea.
Incorrecto — Contenido que desaparece al redistribuirse
El sitio oculta la navegación con display: none al reducir el ancho sin proporcionar un botón de menú alternativo. Se pierde funcionalidad.
Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
C32 | Suficiente | Uso de media queries y CSS Grid para redistribuir columnas |
C31 | Suficiente | Uso de CSS Flexbox para redistribuir el contenido |
C33 | Suficiente | Permitir el reflujo con URLs largas y cadenas de texto |
C38 | Suficiente | Usar width, max-width y Flexbox para ajustar etiquetas y entradas |
G206 | Suficiente | Proporcionar opciones para cambiar a un diseño sin scroll horizontal |
C34 | Asesoramiento | Uso de media queries para corregir encabezados y pies fijos |
C37 | Asesoramiento | Uso de CSS max-width y height para ajustar imágenes |
Errores frecuentes
| Código | Descripción del fallo |
|---|---|
F102 | Fallo al no proporcionar redistribución del texto cuando el viewport se reduce a 320 px CSS de ancho |
Otros errores comunes: usar width o min-width fijos en px en contenedores de texto; usar white-space: nowrap en contenido que debe fluir; menús fijos que ocupan tanto espacio en pantallas pequeñas que bloquean el contenido.