Técnica CSS WCAG 2.2
C32Usar CSS Grid y media queries para reorganizar las columnas
Nombre oficial en el W3C: Usar media queries y CSS Grid para reajustar (reflow) las columnas
En pocas palabras
CSS Grid permite dibujar la página como una rejilla de filas y columnas. Con media queries, esa rejilla pasa de varias columnas a una sola cuando la pantalla es estrecha o se amplía mucho. Así nadie tiene que desplazarse de lado para leer.
Por qué es importante
Las personas con baja visión suelen ampliar mucho el texto. Una página de tres columnas fijas no cabe al 400 %, y obliga a moverse a izquierda y derecha en cada línea.
Con una rejilla flexible, las columnas se apilan. El contenido se lee de arriba abajo, como en un móvil, sin perder nada.
Cómo se hace
- Defina el contenedor con
display: gridy una sola columna por defecto. - Use media queries (reglas de CSS que se aplican según el ancho de la pantalla) para añadir columnas solo cuando haya sitio.
- Prefiera medidas flexibles como
fr,minmax()oauto-fiten lugar de anchos fijos en píxeles. - Coloque los bloques en el HTML en el orden lógico de lectura.
- No reordene visualmente los bloques con
grid-areaoordersi eso descoloca el orden del tabulador.
Cómo comprobarlo
- Abra la página en una ventana de 1280 píxeles de ancho y amplíe al 400 %.
- Otra opción es reducir el ancho a 320 píxeles en el modo dispositivo de las herramientas del navegador (tecla F12).
- Compruebe que las columnas se apilan y que no aparece barra de desplazamiento horizontal.
- Recorra la página con el tabulador. El foco debe avanzar en el mismo orden en que se ven los bloques.
Ejemplo
Portada de un ayuntamiento con tres bloques que pasan a una columna en pantallas estrechas.
<style>
.portada { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 50em) {
.portada { grid-template-columns: 1fr 2fr 1fr; }
}
</style>
<div class="portada">
<nav>Trámites</nav>
<main>Noticias del municipio</main>
<aside>Agenda</aside>
</div>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica C32 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica C32 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.