WCAG 1.4.10: Reflow

Qué significa esta regla

WCAG 1.4.10 Reflow es un criterio de éxito de nivel AA introducido en WCAG 2.1 y mantenido en WCAG 2.2. Especifica que el contenido web debe poder reajustarse —es decir, reorganizarse y redimensionarse— de modo que siga siendo totalmente utilizable con un ancho de ventana gráfica equivalente a 320 píxeles CSS, sin exigir que la persona usuaria se desplace horizontalmente para leer o interactuar con el contenido. El punto de referencia de 320 píxeles CSS corresponde a lo que ve una persona cuando establece el nivel de zoom del navegador en 400% en una pantalla estándar de 1280px de ancho.

El requisito central es que no se produzca ninguna pérdida de información o funcionalidad a este ancho restringido. Todo el texto debe seguir siendo legible, todos los controles interactivos deben seguir siendo operables y todo el contenido significativo debe seguir siendo visible sin activar un desplazamiento bidimensional. Se permite el desplazamiento vertical: el criterio solo prohíbe el desplazamiento horizontal para contenido que fluye verticalmente (y el desplazamiento vertical para contenido que fluye horizontalmente, aunque esto es poco frecuente). Un diseño que obligue a las personas usuarias a desplazarse simultáneamente hacia arriba y hacia abajo y hacia la izquierda y la derecha para leer un párrafo de texto incumpliría este criterio.

El W3C define excepciones explícitas en las que el desplazamiento bidimensional es aceptable. Estas incluyen contenido en el que el diseño bidimensional es esencial para su uso y significado: tablas de datos grandes con muchas columnas, mapas complejos y diagramas geográficos, reproductores de video y sus controles de reproducción, barras de herramientas con múltiples botones de acción dispuestos uno al lado del otro, y juegos o diagramas interactivos que requieren una relación espacial precisa entre elementos. Estas excepciones deben interpretarse de forma restrictiva: la exención se aplica al contenido en sí (por ejemplo, las celdas de una tabla de datos), no a la navegación circundante, encabezados o texto explicativo que lo acompañe.

Una página cumple este criterio si, cuando el navegador está ampliado al 400% (o la ventana gráfica se establece en 320px de ancho), el contenido se reajusta en una sola columna, la navegación se colapsa o apila adecuadamente, las imágenes se redimensionan de forma proporcional y la persona usuaria puede realizar todo lo que podía hacer con el nivel de zoom predeterminado utilizando solo el desplazamiento vertical. Una página incumple si se requiere desplazamiento horizontal para leer frases, alcanzar botones o acceder a cualquier contenido no exento.

Por qué es importante

Aproximadamente 2,2 mil millones de personas en todo el mundo viven con algún tipo de discapacidad visual, según la Organización Mundial de la Salud. Una proporción significativa de esas personas depende del zoom del navegador, la ampliación del sistema operativo o software específico de ampliación de pantalla (como ZoomText o Windows Magnifier) para hacer que el texto y los elementos de la interfaz sean lo suficientemente grandes como para percibirlos cómodamente. Cuando un diseño se rompe a niveles de zoom altos —forzando el contenido fuera de la pantalla o requiriendo desplazamiento horizontal— estas personas se enfrentan a una experiencia de lectura fragmentada en la que cada frase exige un movimiento de paneo de ida y vuelta. Esto no es simplemente una molestia; puede hacer que el contenido complejo sea efectivamente inaccesible.

Considere a una persona usuaria de 65 años con degeneración macular relacionada con la edad que navega por el portal de reserva de citas de un hospital turco con el navegador configurado al 300% de zoom. Si el formulario de reserva se muestra con columnas de ancho fijo, es posible que el botón "Enviar" quede completamente fuera del borde derecho del área visible. La persona usuaria no tiene forma de saber que el botón existe, y mucho menos de interactuar con él. No puede reservar su cita de forma independiente. Este es un daño directo y concreto causado por no cumplir con Reflow.

Más allá de las personas con baja visión, Reflow beneficia a un amplio abanico de personas. Las personas con discapacidades motoras que utilizan acceso por pulsadores o dispositivos de seguimiento de la cabeza encuentran el desplazamiento horizontal extremadamente difícil o imposible de realizar de forma fiable. La discapacidad cognitiva afecta a una parte significativa de la población, y la investigación muestra de forma consistente que los diseños estrechos de una sola columna —típicos de una implementación correcta de Reflow— reducen la carga cognitiva y mejoran la comprensión lectora. Las personas que utilizan dispositivos de pantalla pequeña o que leen en modo de pantalla dividida también se benefician directamente, incluso sin ninguna discapacidad.

Desde una perspectiva técnica y empresarial, implementar Reflow correctamente se solapa casi por completo con construir un diseño adaptable bien estructurado. Esto significa que la conformidad con 1.4.10 mejora de forma natural la usabilidad móvil, reduce las tasas de rebote y contribuye positivamente a las métricas de Core Web Vitals que influyen en la clasificación en motores de búsqueda. Para las plataformas turcas de comercio electrónico en particular, donde el tráfico móvil domina, el cumplimiento de Reflow y la optimización comercial para móviles son esencialmente el mismo objetivo.

Reglas relacionadas de Axe-core

WCAG 1.4.10 Reflow requiere pruebas manuales en lugar de escaneos automatizados. Ninguna regla de axe-core puede automatizar completamente la detección de fallos de Reflow porque el criterio depende del comportamiento visual y funcional de todo un diseño renderizado en un tamaño específico de ventana gráfica, algo que requiere un entorno de navegador real, juicio humano sobre la capacidad de desplazamiento y verificación de que no se ha perdido información. Las herramientas automatizadas no pueden distinguir de forma fiable entre desplazamiento bidimensional intencional (para un mapa o tabla exentos) y un desbordamiento de diseño no intencional causado por un contenedor de ancho fijo.

• Prueba manual — ancho de ventana gráfica de 320px: Cambie el tamaño de la ventana gráfica del navegador a exactamente 320 píxeles CSS de ancho (o amplíe al 400% en una pantalla de 1280px de ancho) y desplácese verticalmente por cada plantilla de página, estado de pantalla y componente interactivo. Verifique que ningún contenido esté recortado, que no aparezca ninguna barra de desplazamiento horizontal para contenido no exento y que toda la funcionalidad siga siendo accesible. Axe DevTools marcará esto como un elemento de "Needs Review" en lugar de una infracción automática, porque el análisis de diseño basado en herramientas no puede determinar si el desbordamiento representa un fallo real o entra dentro de una exención.
• Señal parcial automatizada — comprobación de la metaetiqueta viewport: Axe-core puede detectar si la página utiliza una etiqueta meta name='viewport' con user-scalable=no o maximum-scale=1, ambas impiden que las personas usuarias hagan zoom y, por lo tanto, hacen imposible alcanzar el estado de zoom del 400% al que apunta Reflow. Aunque técnicamente se trata de un problema distinto (WCAG 1.4.4), está estrechamente relacionado y su presencia garantiza un fallo de Reflow. Axe marca esto bajo la regla meta-viewport. Cualquier página que bloquee el zoom también bloquea por definición el cumplimiento de Reflow.
• Auditoría manual de componentes: Más allá del diseño de página completa, componentes individuales como carruseles, encabezados fijos, cuadros de diálogo modales, widgets de chat flotantes, banners de cookies y tablas de datos requieren cada uno una verificación individual a 320px. Un encabezado de página puede reajustarse correctamente mientras que un modal promocional se muestra con un ancho fijo de 600px y un botón de cierre inalcanzable, un fallo que solo detectará una revisión manual componente por componente.

Cómo probar

1. Preanálisis automatizado: Ejecute axe DevTools o Lighthouse en Chrome DevTools en cada página. Busque específicamente la infracción de meta-viewport, que indica que el zoom está bloqueado y garantiza un fallo de Reflow. Tome nota también de cualquier advertencia relacionada con desbordamiento marcada como "Needs Review". Registre los resultados, pero tenga en cuenta que un análisis automatizado limpio no confirma la conformidad con Reflow: los pasos manuales son obligatorios.
2. Establecer la ventana gráfica en 320px: En las DevTools de Chrome o Firefox, abra la barra de herramientas de dispositivos (Ctrl+Shift+M / Cmd+Shift+M), introduzca un tamaño de dispositivo personalizado de 320×568 píxeles (o cualquier altura) y establezca la relación de píxeles del dispositivo en 1. Alternativamente, abra una ventana de navegador de 1280px de ancho y amplíe al 400% usando Ctrl+= (Cmd+= en Mac). Ambos métodos simulan la condición de 320 píxeles CSS especificada por WCAG.
3. Desplazarse verticalmente por toda la página: Comenzando desde la parte superior de la página, desplácese hacia abajo utilizando únicamente la barra de desplazamiento vertical o la rueda del ratón. En ningún momento debe aparecer una barra de desplazamiento horizontal para contenido no exento. Si aparece, la página falla. Confirme que todo el texto es completamente legible: ninguna frase está cortada, ningún carácter está recortado por el borde de la ventana gráfica.
4. Probar toda la funcionalidad interactiva: Con un ancho de 320px, intente completar todas las tareas clave de la persona usuaria: rellenar y enviar formularios, abrir menús de navegación, activar modales y cuadros de diálogo, usar acordeones y pestañas, interactuar con carruseles y activar cualquier contenido dinámico. Cada control debe ser alcanzable y operable utilizando solo el desplazamiento vertical y la interacción normal.
5. Comprobar todas las plantillas y estados de página: Pruebe la página de inicio, las páginas de contenido internas, los formularios, los flujos de pago, los estados de error y cualquier vista autenticada. Una navegación adaptable que se colapsa correctamente en la página de inicio puede seguir fallando en una página de producto muy anidada con una plantilla diferente.
6. Uso conjunto con lector de pantalla (complementario): Utilice NVDA con Firefox o VoiceOver con Safari a un ancho de 320px para confirmar que el orden y el significado del contenido se conservan después del reajuste. A veces, el reajuste basado en CSS cambia el orden visual sin alterar el orden del DOM, lo que hace que los anuncios del lector de pantalla resulten confusos. Esto no es estrictamente una prueba de Reflow, pero detecta implementaciones de reajuste que crean problemas de accesibilidad adicionales.
7. Documentar las exenciones: Para cualquier contenido que requiera desplazamiento horizontal (tablas de datos, mapas, bloques de código), verifique y documente que realmente entra dentro de una excepción definida por WCAG. Confirme que el contenido circundante de la página (encabezados, instrucciones, navegación) sigue reajustándose correctamente incluso si el componente incrustado no lo hace.

Cómo corregir

Contenedor de ancho fijo que rompe el diseño — Incorrecto

<!-- Fixed pixel width forces horizontal scrolling at small viewports -->
<div style='width: 960px; margin: 0 auto;'>
  <p>This content will overflow a 320px viewport and require horizontal scrolling.</p>
  <button>Submit Application</button>
</div>

Contenedor de ancho fijo que rompe el diseño — Correcto

<!-- Use max-width with 100% so container never exceeds its parent but shrinks on small screens -->
<div class='content-wrapper'>
  <p>This content reflows naturally at any viewport width.</p>
  <button>Submit Application</button>
</div>

<!-- In your CSS (external stylesheet) -->
<!-- .content-wrapper { max-width: 960px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 1rem; } -->

Metaetiqueta viewport que bloquea el zoom — Incorrecto

<!-- This prevents users from zooming at all, making Reflow impossible to achieve -->
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>

Metaetiqueta viewport que bloquea el zoom — Correcto

<!-- Allow zooming by removing maximum-scale and user-scalable restrictions -->
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- Users can now zoom to 400% and content will reflow as required by WCAG 1.4.10 -->

Barra de navegación horizontal que se desborda — Incorrecto

<!-- Navigation items forced into a single row with no wrapping or collapse mechanism -->
<nav aria-label='Primary navigation'>
  <ul style='display: flex; flex-wrap: nowrap; white-space: nowrap;'>
    <li><a href='/home'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About Us</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/blog'>Blog</a></li>
    <li><a href='/support'>Support</a></li>
  </ul>
</nav>

Barra de navegación horizontal que se desborda — Correcto

<!-- Hamburger/disclosure pattern for small viewports; full navigation accessible at all sizes -->
<nav aria-label='Primary navigation'>
  <button aria-expanded='false' aria-controls='nav-menu' id='nav-toggle'>
    Menu
  </button>
  <ul id='nav-menu'>
    <li><a href='/home'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About Us</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/blog'>Blog</a></li>
    <li><a href='/support'>Support</a></li>
  </ul>
</nav>
<!-- CSS media query hides #nav-menu by default below a breakpoint and shows it on toggle -->
<!-- The button is hidden above the breakpoint where the full nav is always visible -->

Tabla de datos sin adaptación para reajuste — Incorrecto

<!-- Wide table with no scroll container; overflows the viewport with no warning to users -->
<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope='col'>Region</th>
      <th scope='col'>Q1</th>
      <th scope='col'>Q2</th>
      <th scope='col'>Q3</th>
      <th scope='col'>Q4</th>
      <th scope='col'>Total</th>
    </tr>
  </thead>
</table>

Tabla de datos sin adaptación para reajuste — Correcto

<!-- Wrap the table in a scrollable container scoped to just the table element -->
<!-- This is an explicit WCAG 1.4.10 exception for complex data tables -->
<div role='region' aria-labelledby='table-caption' tabindex='0' class='table-scroll-container'>
  <table>
    <caption id='table-caption'>Quarterly Sales Data (scroll horizontally to view all columns)</caption>
    <thead>
      <tr>
        <th scope='col'>Region</th>
        <th scope='col'>Q1</th>
        <th scope='col'>Q2</th>
        <th scope='col'>Q3</th>
        <th scope='col'>Q4</th>
        <th scope='col'>Total</th>
      </tr>
    </thead>
  </table>
</div>
<!-- CSS: .table-scroll-container { overflow-x: auto; } -->
<!-- The caption warns users, role=region + aria-labelledby makes it keyboard-focusable -->

Errores comunes

• Usar overflow: hidden en el <body> o en un contenedor de nivel superior para suprimir las barras de desplazamiento horizontales sin corregir el desbordamiento subyacente: Esto oculta la barra de desplazamiento, pero el contenido sigue recortado e inaccesible, lo cual es posiblemente peor que un desbordamiento visible porque la persona usuaria no tiene indicios de que exista contenido más allá del borde de la ventana gráfica.
• Establecer max-scale=1 o user-scalable=no en la metaetiqueta viewport para evitar que un diseño móvil "parezca roto" con un zoom alto: Esto deshabilita por completo la capacidad de la persona usuaria para hacer zoom, lo que constituye tanto un fallo de Reflow como una infracción de WCAG 1.4.4 Resize Text.
• Aplicar white-space: nowrap a contenedores de texto, listas de navegación o grupos de botones sin una anulación específica por breakpoint: Esto fuerza el texto a una sola línea independientemente del espacio disponible y es una de las causas más comunes de desbordamiento horizontal a 320px.
• Usar valores de píxeles absolutos en definiciones de CSS Grid grid-template-columns (por ejemplo, grid-template-columns: 300px 600px) sin una alternativa adaptable: A 320px, las dos columnas suman 900px y se desbordarán sin reajuste a menos que una media query reemplace la definición con 1fr o 100%.
• Incrustar elementos <iframe> con atributos de width y height fijos que apuntan a contenido de terceros (mapas, videos, formularios): Los iframes no se escalan automáticamente, por lo que un mapa incrustado de 600px de ancho se desbordará en una ventana gráfica de 320px. Envuelva los iframes en un contenedor que preserve la relación de aspecto y establezca el propio iframe en width: 100%.
• Diseñar cuadros de diálogo modales y paneles fuera del lienzo con un ancho mínimo fijo mayor de 320px: Un modal con min-width: 500px se desbordará y probablemente ocultará su botón de cierre fuera de la pantalla, atrapando a las personas usuarias de teclado dentro del cuadro de diálogo en anchos de ventana gráfica pequeños.
• Tratar los bloques de código y los elementos <pre> como exentos de Reflow sin envolverlos en un contenedor desplazable horizontalmente: Los bloques de código sin procesar no figuran como una excepción en WCAG. Aunque el propio contenido de código pueda ser complejo, la página circundante debe reajustarse; el bloque de código debe desplazarse de forma independiente dentro de un contenedor con overflow-x: auto, y no provocar que toda la página se desplace horizontalmente.
• Olvidar probar estados autenticados y dinámicos: Muchos equipos solo prueban la página de inicio sin iniciar sesión. Los paneles, páginas de perfil de usuario, formularios de varios pasos y estados de error cargados mediante JavaScript se construyen con frecuencia con suposiciones de ancho fijo y fallan Reflow incluso cuando las páginas de marketing lo cumplen.
• Usar CSS transform: scale() para reducir visualmente el contenido en lugar de implementar un diseño verdaderamente adaptable: La escala reduce el tamaño aparente pero no reajusta el contenido: el texto se vuelve diminuto e ilegible en lugar de reajustarse en una sola columna legible, lo que incumple tanto los criterios de Reflow como de Resize Text.
• Suponer que un diseño adaptable para móviles cumple automáticamente Reflow: El diseño adaptable suele dirigirse a breakpoints de 360px, 768px y 1024px. El punto de referencia de WCAG de 320px es más estrecho que la mayoría de los breakpoints móviles, lo que significa que el contenido que se ve correcto en un teléfono pequeño estándar puede seguir desbordándose a 320px. Siempre pruebe exactamente a 320px, no a un tamaño "móvil" genérico.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial número 32933 el 21 de junio de 2025, establece requisitos de accesibilidad vinculantes para una amplia gama de proveedores de servicios digitales que operan en Turquía. La circular exige la conformidad con normas internacionales de accesibilidad web —siendo WCAG 2.1 Nivel AA la base— para las entidades cubiertas. WCAG 2.2 Nivel AA, que incorpora todos los criterios de 2.1 incluido 1.4.10 Reflow, se fomenta firmemente y es la norma requerida para obtener el Erişilebilirlik Logosu (Logotipo de Accesibilidad) emitido por el Ministerio de Familia y Servicios Sociales (Aile ve Sosyal Hizmetler Bakanlığı).

Los tipos de entidades cubiertas por la Circular Presidencial 2025/10 incluyen instituciones públicas y organismos gubernamentales en todos los niveles, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, empresas de telecomunicaciones con 200.000 o más abonados, plataformas de comercio electrónico, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (Millî Eğitim Bakanlığı). Para cada uno de estos sectores, se espera que todas las interfaces digitales de cara al público —sitios web, aplicaciones web y contenido web móvil— sean accesibles para las personas con discapacidad, incluidas aquellas que dependen del zoom y del ajuste de la ventana gráfica para percibir el contenido.

WCAG 1.4.10 Reflow es particularmente relevante en el contexto turco por varias razones. En primer lugar, la penetración de internet móvil en Turquía es excepcionalmente alta, y una parte sustancial de las personas usuarias accede a servicios gubernamentales, portales bancarios y plataformas de comercio electrónico a través de navegadores móviles con distintos niveles de zoom. Un sistema de citas hospitalarias que no cumple Reflow puede impedir que pacientes mayores con baja visión reserven consultas de forma independiente, un incumplimiento directo tanto de la legislación de accesibilidad como de la misión de servicio público de las instituciones cubiertas. En segundo lugar, el programa Erişilebilirlik Logosu requiere una auditoría de conformidad que cubra todos los criterios de éxito de Nivel AA; incumplir 1.4.10 descalificaría a un sitio por lo demás conforme para recibir el logotipo. En tercer lugar, para las empresas de telecomunicaciones con grandes bases de abonados, los portales de autoservicio accesibles y las interfaces de gestión de cuentas son esenciales: un panel de cuenta de ancho fijo que se desborda al 400% de zoom perjudica directamente a las personas abonadas con discapacidad visual que, de otro modo, no necesitarían acudir a una tienda física ni llamar a una línea de atención.

Las organizaciones que busquen demostrar conformidad con la normativa de accesibilidad turca deben asegurarse de que sus implementaciones de diseño adaptable se validan específicamente en el umbral de 320 píxeles CSS, de que ninguna metaetiqueta viewport bloquea el zoom de la persona usuaria y de que toda la funcionalidad interactiva —incluidos los flujos de autenticación, el envío de formularios y la descarga de documentos— sigue siendo totalmente operable sin desplazamiento horizontal. Incluir pruebas de Reflow como parte de un historial de auditoría de accesibilidad documentado será esencial para demostrar el cumplimiento ante los organismos reguladores y para mantener la elegibilidad para el Erişilebilirlik Logosu.