Técnica CSS WCAG 2.2
C32Usar media queries y CSS Grid para reajustar (reflow) las columnas
En resumen
Muestra cómo maquetar con CSS Grid y media queries para que las columnas se recoloquen una debajo de otra cuando el espacio se reduce, de modo que el contenido se reajuste sin desplazamiento horizontal al ampliar hasta el 400 %. Beneficia a quien usa ampliación o pantallas estrechas. Úsela al diseñar maquetaciones en rejilla que deban cumplir el criterio 1.4.10 Reajuste de elementos, respetando el orden del código fuente.
Aplicabilidad
CSS
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 Grid 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 tamaño del contenido.
Los principios básicos de las maquetaciones con Grid son:
- Definir el tamaño de las regiones de maquetación mediante propiedades de Grid 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 de rejilla como una fila de elementos de rejilla 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.
El uso de CSS Grid puede provocar una desconexión en la navegación con teclado al hacer que la disposición visual y el orden del código fuente sean distintos. El módulo CSS Grid Layout Module Level 1 advierte contra la reordenación del contenido mediante la colocación de los elementos de la rejilla, ya que provoca un orden del foco incorrecto para los usuarios de teclado y otras personas.
Ejemplos
Maquetación con Grid en HTML y CSS - complejidad media
El siguiente ejemplo de complejidad media usa HTML y CSS para crear una maquetación con Grid. 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 unidades fr, como fracción del espacio libre del contenedor de rejilla, para los elementos de la rejilla mediante la propiedad "grid-template-columns", y estos se disponen en el orden del código fuente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS: Using media queries and grid CSS to reflow columns</title>
<style>
/* Reflow Styling */
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
.grid,
.subgrid {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.grid {
grid-template-areas:
'header'
'main'
'aside'
'footer';
width: 100%;
}
.subgrid {
width: calc(100% + 2rem);
margin: 0 -1rem;
}
.grid-item,
.subgrid-item {
padding: 1rem;
}
@media all and (min-width: 576px) {
.subgrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin-bottom: 1rem;
}
.subgrid-item {
padding-bottom: 0.25rem;
}
}
@media all and (min-width: 992px) {
.grid {
grid-template-areas:
'header header header'
'main main aside'
'footer footer footer';
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
</style>
</head>
<body class="grid">
<header class="grid-item">
...
</header>
<main class="grid-item">
...
...
<div class="subgrid">
<div class="subgrid-item">
...
</div>
<div class="subgrid-item">
...
</div>
</div>
</main>
<aside class="grid-item">
...
</aside>
<footer class="grid-item">
...
</footer>
</body>
</html>
Ejemplo funcional: Usar media queries y CSS Grid para reajustar las columnas
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 o el alto del navegador de forma proporcional. Por ejemplo, con un zoom del 300 % la ventana gráfica debería tener 960px de ancho.
Resultados esperados
Comprobar que las comprobaciones n.º 3 y n.º 4 son verdaderas.
Recursos relacionados
- CSS Grid Layout module level 1
- MDN grid layout index (índice de documentación de Grid en MDN)
- Grid by example (Grid con ejemplos)
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 C32 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.
