Respuesta corta: el reflow de WCAG, el criterio de conformidad 1.4.10, pide que tu contenido quepa en una ventana de 320 píxeles CSS de ancho sin desplazarse hacia los lados. Es lo que muestra una ventana de 1,280 píxeles con zoom al 400%. El contenido que necesita dos dimensiones, como tablas de datos, mapas y video, queda exento.
Qué pide el criterio reflow
El texto del W3C pide que el contenido se pueda mostrar sin perder información ni funciones, y sin desplazarse en dos dimensiones. El contenido que se lee bajando por la página tiene que funcionar con 320 píxeles CSS de ancho.
En los idiomas que se escriben en vertical, que se desplazan de lado, la medida es una altura de 256 píxeles CSS. Las partes que necesitan un diseño en dos dimensiones para usarse o entenderse quedan exentas.
Una nota del criterio explica las cifras: 320 píxeles CSS equivalen a una ventana que empieza con 1,280 píxeles de ancho y se amplía al 400%. Reflow es de nivel AA y forma parte de WCAG 2.2, que trata nuestra guía de WCAG 2.2.
No hay una traducción oficial al español de WCAG 2.1 ni de 2.2, así que usamos el nombre del criterio en inglés.
Por qué 320 píxeles
El W3C explica que, cuando las líneas pasan del borde de la ventana, la gente tiene que desplazarse a un lado y a otro en cada línea. Pierde el hilo, y leer cuesta mucho más.
Eligió 320 píxeles CSS como un mínimo razonable que se puede cumplir, y coincidía con las pantallas de teléfono pequeñas cuando se redactó el criterio. También señala que el 400% se aplica al ancho y al alto, no al área.
Así, el mismo diseño sirve para teléfonos y para pantallas grandes con zoom. Nuestra guía de diseño web responsive explica cómo se construye ese diseño.
Qué puede desplazarse de lado
| Contenido | A 320 píxeles CSS | Por qué |
|---|---|---|
| Párrafos, encabezados y listas | Se ajustan dentro de la ventana | Las líneas que salen del borde obligan a ir y volver |
| Columnas y barras laterales | Se apilan en una columna, o en otras más estrechas que quepan | Mover contenido está bien si la gente llega a él |
| Tablas de datos | Pueden desplazarse en su propia caja; cada celda debe caber | Las filas y las columnas dan el significado |
| Mapas, diagramas y video | Pueden mantener su forma | Cortados en trozos, costaría entenderlos |
| Carruseles | Pueden moverse de lado si cada panel cabe | Cada panel se lee en una sola dirección |
| Barras de herramientas de edición | Pueden quedarse a la vista | Se necesitan el contenido y sus herramientas a la vez |
De la página Understanding del W3C sobre el criterio 1.4.10, en inglés, consultada el 5 de noviembre de 2026.
La excepción cubre solo esa parte de la página. Si una tabla necesita sus propias barras de desplazamiento, los párrafos que la rodean tienen que seguir cabiendo en la ventana.
La solución del W3C es una caja para la tabla con sus propias barras de desplazamiento, de modo que la página no se desplaza de lado. En CSS, overflow-x: auto en esa caja muestra la barra solo cuando la tabla no cabe, como explica MDN. En los videos, max-width: 100% mantiene el reproductor dentro de la ventana.
Nada puede desaparecer
Ocultar algo a 320 píxeles es un fallo si la gente ya no puede llegar a ello. El fallo F102 del W3C describe contenido que se ve en una pantalla ancha y desaparece tras el reflow.
Entre sus ejemplos están unos enlaces de la barra lateral que desaparecen y unas etiquetas cambiadas por texto de ejemplo. Otro es un buscador que desaparece sin un icono o un menú para volver a mostrarlo.
Mover contenido está permitido. Un menú puede quedar detrás de un botón y una columna puede bajar debajo de otra, siempre que todo siga a mano.
Deja que la gente haga zoom
web.dev recomienda la etiqueta meta viewport con width=device-width e initial-scale=1, para que la página se ajuste a la pantalla. Advierte contra maximum-scale=1 y user-scalable=no, que impiden hacer zoom.
MDN añade que bloquear el zoom impide leer la página a las personas con baja visión. Señala que WCAG exige al menos un aumento de 2× y llama buena práctica a permitir 5×.
Nuestra guía de la prueba de optimización para móviles muestra dónde comprobar que la etiqueta viewport no bloquea el zoom. web.dev también recuerda que el texto en em o rem sigue los ajustes de quien lee, y el texto en píxeles puede que no.
Cómo hacer que una página haga reflow
- Mantén la etiqueta meta viewport con width=device-width e initial-scale=1.
- No pongas nunca maximum-scale=1 ni user-scalable=no.
- Monta los diseños con flexbox o grid, para que los bloques pasen a la línea siguiente cuando falte espacio.
- Deja que las columnas se apilen en anchos estrechos, en el mismo orden que el código.
- Pon max-width: 100% a las imágenes y los videos.
- Mete las tablas anchas en una caja propia con overflow-x: auto.
- Prueba a 1,280 píxeles con zoom al 400% y comprueba que no falte nada.
Las técnicas C31 y C32 del W3C muestran diseños con flexbox y grid que hacen reflow. Las dos avisan de que reordenar bloques con CSS puede romper el orden del teclado.
Cómo probar el reflow
La prueba del W3C empieza con la página a un ancho de escritorio, como 1,280 píxeles. Después haz zoom al 400%, o estrecha la ventana a 320 píxeles.
Lee la página de arriba abajo. Ningún texto debería obligarte a desplazarte de lado. Todo lo que veías a ancho completo tiene que seguir ahí, o a mano en un menú, un botón o un enlace.
Puede que tu ventana salga algo más estrecha. El W3C amplió al 400% una pantalla de portátil de 1,280 por 1,024 y obtuvo una ventana de 318 píxeles de ancho, por la barra de desplazamiento.
Nuestras páginas a 320 píxeles
El 5 de noviembre de 2026 abrimos seis de nuestras páginas en una ventana de 320 píxeles CSS de ancho. Es el ancho de una ventana de 1,280 píxeles con zoom al 400%. Fueron la de inicio, la de diseño web y una guía, en los dos idiomas.
Ninguna se desplazó en horizontal. Cada página midió justo 320 píxeles de ancho, así que no había nada hacia donde desplazarse.
Los bloques que van uno al lado de otro a 1,280 píxeles se apilaron. En la guía, cada fila de bloques pasó a una sola columna. En la página de diseño web, las filas de dos a cuatro bloques pasaron a una columna, o a dos estrechas que siguen cabiendo.
La tabla de la guía es la que más cambió. A 1,280 píxeles tiene tres columnas. A 320, cada fila pasó a ser un bloque con sus celdas una debajo de otra, así que la tabla no necesita una barra de desplazamiento propia.
Antes de publicar
- A 320 píxeles CSS, ningún texto obliga a desplazarse de lado.
- Las columnas y las barras laterales se apilan o se estrechan para caber.
- No falta nada de lo que había en el diseño ancho.
- Tablas, mapas y videos se desplazan en su propia caja, si hace falta.
- La etiqueta viewport no bloquea el zoom.
- Los tamaños de texto usan em o rem.
RecuerdaCon zoom al 400%, una pantalla ancha se vuelve estrecha. Si tu página funciona con 320 píxeles de ancho, funciona para quien amplía para leer.
Nuestro servicio de diseño web hace diseños que se apilan en una columna en pantallas estrechas, como las páginas de arriba.
Respuestas rápidas sobre el reflow de WCAG
¿Qué diferencia hay entre reflow y cambio de tamaño del texto?
Cambio de tamaño del texto, el criterio 1.4.4, pide que el texto pueda crecer al 200%. Reflow, el criterio 1.4.10, pide que el contenido quepa en 320 píxeles CSS sin desplazarse en dos direcciones. El W3C dice que el texto debe llegar al 200% sin dejar de cumplir reflow.
¿Se permite alguna vez el desplazamiento horizontal?
Sí, en las partes que necesitan dos dimensiones: tablas de datos, mapas, diagramas, video, juegos, presentaciones y barras de herramientas que deben quedar a la vista. Un carrusel también puede moverse en horizontal si cada panel cabe en 320 píxeles.
¿Las tablas de datos incumplen reflow?
No. Las tablas de datos son una excepción, pero cada celda tiene que ajustarse. El encabezado, el buscador o la paginación que rodean la tabla también tienen que caber en la ventana. El W3C muestra la tabla en una caja con sus propias barras de desplazamiento.
¿320 píxeles es el ancho de un teléfono?
Se eligió como un mínimo razonable, y coincidía con las pantallas de teléfono pequeñas cuando se redactó el criterio. En una computadora, es lo que muestra una ventana de 1,280 píxeles con zoom al 400%.
¿Ocultar contenido en anchos pequeños es un fallo?
Solo si la gente no puede llegar a él. El fallo F102 del W3C trata del contenido que desaparece a 320 píxeles. Llevarlo más abajo, o detrás de un menú, un botón o un enlace, está bien mientras siga a mano.
Fuentes
Consultadas el 5 de noviembre de 2026. web.dev: Diseño adaptable accesible. En inglés: Iniciativa de Accesibilidad Web del W3C, Understanding Success Criterion 1.4.10: Reflow, las técnicas C32: Using media queries and grid CSS to reflow columns y C31: Using CSS Flexbox to reflow content, y el fallo F102; MDN Web Docs, <meta name="viewport"> y overflow-x. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.