Funcionamiento del Test Content Reflow
Este test detecta cuando el contenido de una página web no se reorganiza correctamente (reflow) al reducir el viewport a 320px de ancho por 256px de alto, generando problemas de corte de contenido (cut) o superposición de elementos (overlap).
Objetivo del Test
Verificar que el contenido de una página web se reorganice correctamente cuando:
El viewport tiene un ancho de 320px y una altura de 256px
El contenido debe adaptarse sin:
- Cortarse (cut): Elementos cuyo contenido es cortado por los límites del viewport
- Superponerse (overlap): Elementos visibles que se superponen entre sí
Funcionamiento Paso a Paso
El test ejecuta una secuencia de 6 pasos automatizados:
Paso 1: Establecer Viewport Base
Se configura el navegador con un tamaño de ventana de 1280x1024 píxeles
Este es el punto de partida antes de aplicar el zoom
Paso 2: Capturar Screenshot Baseline
Se captura una screenshot del estado inicial de la página
Esta imagen se usa como referencia para comparaciones posteriores
Paso 3: Aplicar Zoom del 400%
Se aplica un zoom del 400% en el navegador reduciendo 4 veces el tamaño del viewport
Cálculo importante:
- 1280px ÷ 4 = 320px de ancho
- 1024px ÷ 4 = 256px de alto
El viewport efectivo queda en 320x256 píxeles
Paso 4: Detectar Elementos Cortados (Cut)
Este es el paso crítico de validación para elementos cortados
Se analiza visualmente la página usando análisis de visión por IA
Se detectan elementos cuyo contenido es cortado por los límites del viewport
Los elementos detectados se almacenan temporalmente para consolidación posterior
Paso 5: Detectar Elementos Superpuestos (Overlap)
Este es el paso crítico de validación para elementos superpuestos
Se analiza visualmente la página usando análisis de visión por IA
Se detectan elementos visibles que se superponen entre sí (por ejemplo: texto sobre imágenes, botones sobre texto, etc.)
Los elementos detectados se almacenan temporalmente para consolidación posterior
Paso 6: Consolidar y Reportar Issues
Se consolidan los elementos que tienen problemas de corte y/o superposición
Un elemento puede tener ambos problemas (corte y superposición), en cuyo caso se reporta una sola vez con ambos problemas listados
Se genera un reporte individual por cada elemento afectado
Solo se reportan los tipos de issues que realmente ocurren (si no hay corte, no se reporta corte; si no hay superposición, no se reporta superposición)
Criterios de Éxito
Test PASA cuando:
NO hay elementos cortados por los límites del viewport a 320x256px
NO hay elementos visibles superpuestos entre sí a 320x256px
El contenido se reorganiza automáticamente (reflow) para ajustarse al ancho de 320px
Todos los elementos son accesibles y visibles sin cortes ni superposiciones
Test FALLA cuando:
Elementos cortados (cut): El contenido de un elemento es cortado por los límites del viewport y no se muestra completamente
Elementos superpuestos (overlap): Elementos visibles se superponen entre sí (texto sobre imágenes, botones sobre texto, etc.)
El usuario no puede acceder completamente al contenido debido a cortes o superposiciones
Excepciones
Este criterio NO aplica a:
Imágenes que requieren diseño bidimensional (mapas, diagramas)
Tablas de datos complejas
Videos o juegos embebidos
Elementos que no son visibles para el usuario (elementos ocultos)
¿Cómo Ejecutar el Test Manualmente?
Para reproducir el test manualmente en el navegador:
Abrir la página a probar en Chrome
Abrir las DevTools (F12 o clic derecho → Inspeccionar)
Configurar el viewport a 320px de ancho:
- Ir a la pestaña "Console" o usar el modo responsive (Ctrl+Shift+M)
- Ajustar el ancho del viewport hasta lograr exactamente 320px
- Ajustar la altura a 256px si es posible
Inspeccionar visualmente:
- Verificar si hay elementos cuyo contenido está cortado por los límites del viewport
- Verificar si hay elementos visibles que se superponen entre sí (texto sobre imágenes, botones sobre texto, etc.)
Documentar los elementos afectados:
- Anotar qué elementos están cortados
- Anotar qué elementos se superponen
- Capturar screenshots como evidencia
Formato del Reporte
Cuando el test detecta problemas, genera un reporte con la siguiente estructura:
Título:
"The content on the page does not reflow correctly"
Descripción:
"Content is not reflowed correctly at 320px:
- the "[nombre del elemento cortado]" is cropped and not fully displayed.
- the "[nombre del elemento superpuesto]" is overlaps."
Checkpoint WCAG:
1.4.10 - Reflow
Tipo de Issue:
Zoom
Acción Realizada:
- Using Chrome browser, open the URL: [URL de la página]
- Configure the viewport to 320 px width
- Note how the content is displayed
Resultado Actual:
Content is not reflowed correctly at 320px:
- the "[nombre del elemento]" is cropped and not fully displayed.
- the "[nombre del elemento]" is overlaps.
Resultado Esperado:
All text content should reflow correctly at 320x256px viewport without being cut off, without overlapping other elements.
Limitaciones Conocidas
El test utiliza análisis de visión por IA, por lo que puede haber falsos positivos o falsos negativos en casos límite
Elementos con contenido dinámico o que cambian rápidamente pueden no ser detectados correctamente
El test se enfoca en elementos visibles; elementos ocultos o fuera del viewport no son evaluados
La detección de superposiciones puede ser afectada por elementos con transparencias o efectos visuales complejos