Técnica CSS WCAG 2.2
C31Usar CSS Flexbox para el reajuste (reflow) del contenido
En resumen
Muestra cómo maquetar con CSS Flexbox para que las regiones de la página se adapten al ancho disponible y el contenido se reajuste sin desplazamiento horizontal al ampliar el zoom hasta el 400 %. Beneficia a quien usa ampliación o pantallas pequeñas, y evita que se pierda contenido fuera de la ventana. Úsela al diseñar maquetaciones en columnas que deban cumplir el criterio 1.4.10 Reajuste de elementos.
Descripción
El objetivo de esta técnica es poder presentar el contenido sin introducir una barra de desplazamiento horizontal a un ancho equivalente a 320 píxeles CSS, ni una barra de desplazamiento vertical a una altura equivalente a 256 píxeles CSS en el caso de texto pensado para desplazarse horizontalmente. Esto se consigue mediante técnicas de maquetación que se adaptan al espacio disponible en la ventana gráfica (viewport).
Las maquetaciones con Flexbox definen regiones de maquetación que se reajustan según sea necesario para mostrar la región en pantalla. Aunque la disposición exacta varía en consecuencia, la relación entre los elementos y el orden de lectura se mantienen cuando se hace correctamente. Es una forma eficaz de crear diseños que se presentan bien en distintos dispositivos y para usuarios con distintas preferencias de zoom.
Los principios básicos de las maquetaciones con Flexbox son:
- Definir el tamaño de las regiones de maquetación mediante propiedades de Flexbox y media queries para tamaños concretos de la ventana gráfica, de modo que se agranden, se reduzcan o salten de línea en el espacio disponible y respondan a los niveles de zoom;
- Colocar las regiones de maquetación en el contenedor flexible como una fila de elementos flexibles adyacentes, que pueden pasar a nuevas filas según sea necesario, de forma muy parecida a como saltan de línea las palabras de un párrafo.
Flexbox puede provocar una desconexión en la navegación con teclado si se usan las propiedades de orden e inversión (order y reverse). El módulo CSS Flexible Box Layout advierte contra la reordenación de la lógica del contenido, ya que provoca un orden incorrecto del código fuente y no es conforme.
Ejemplos
Ejemplo 1: maquetación con Flexbox de complejidad media en HTML y CSS
El siguiente ejemplo de complejidad media usa HTML y CSS para crear una maquetación con Flexbox. Las regiones de maquetación ajustan su tamaño a medida que se modifica la ventana gráfica. Cuando el ancho total de la ventana gráfica coincide con el ancho definido mediante media queries, las columnas saltan de línea y se colocan una debajo de otra en lugar de una junto a otra, o viceversa.
El nivel de zoom puede aumentarse hasta el 400 % sin que sea necesario desplazarse en más de una dirección. Este ejemplo concreto usa tamaños en porcentaje para los elementos flexibles mediante la propiedad "flex-basis", y estos se disponen en el orden del código fuente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using CSS Flexbox for Reflow</title>
<style>
/* Reflow Styling */
.row {
width: 100%;
display: flex;
flex-flow: row wrap;
}
.row-nested {
width: calc(100% + 2rem);
margin: 0 -1rem 1rem -1rem;
}
.col {
padding: 1rem;
flex: 0 1 100%;
}
@media all and (min-width: 576px) {
.col-panel {
flex: 0 1 50%;
padding-bottom: 0.25rem;
}
}
@media all and (min-width: 992px) {
main {
flex: 0 1 66.333333%;
}
aside {
flex: 0 1 33.333333%;
margin-top: 0;
}
}
</style>
</head>
<body class="row">
<header class="col">
...
</header>
<main class="col">
...
...
<div class="row row-nested">
<div class="col col-panel">
...
</div>
<div class="col col-panel">
...
</div>
</div>
</main>
<aside class="col">
...
</aside>
<footer class="col">
...
</footer>
</body>
</html>Ejemplo funcional: Usar CSS Flexbox para el reajuste (reflow)
Pruebas
Procedimiento
- Mostrar la página web en un agente de usuario capaz de ampliar al 400 % y establecer las dimensiones de la ventana gráfica (en píxeles CSS) en 1280 de ancho y 1024 de alto.
- Ampliar al 400 %.
- Para el contenido que se lee horizontalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento horizontal.
- Para el contenido que se lee verticalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento vertical.
Si el navegador no es capaz de ampliar al 400 %, puede reducir el ancho del navegador de forma proporcional. Por ejemplo, con un zoom del 300 % la ventana gráfica debería tener 960px de ancho.
Resultados esperados
Las comprobaciones n.º 3 y n.º 4 son verdaderas.
Recursos relacionados
- CSS Flexible Box Layout Module Level 1
- MDN Flexible Box Layout (documentación de Flexbox en MDN)
- CSS Tricks Guide to Flexbox (guía de Flexbox de CSS-Tricks)
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C31 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
