Addaw, ir a inicio Donar

Técnica CSS WCAG 2.2

C31Usar CSS Flexbox para que el contenido se recoloque al ampliar

Nombre oficial en el W3C: Usar CSS Flexbox para el reajuste (reflow) del contenido

En pocas palabras

Flexbox es un sistema de CSS que coloca bloques en fila y los pasa a la línea siguiente cuando no caben. Así, al ampliar la página o verla en un móvil, el contenido se recoloca en una sola columna. La persona solo tiene que desplazarse hacia abajo, nunca de lado.

Por qué es importante

Muchas personas con baja visión amplían la página al 200 %, al 300 % o al 400 %. Si el diseño tiene anchos fijos, el texto se sale de la pantalla.

Entonces hay que mover la página a izquierda y derecha en cada línea. Leer así una noticia o rellenar una cita previa resulta agotador y es fácil perderse.

Cómo se hace

  1. Agrupe los bloques de la página (menú, contenido, barra lateral) dentro de un contenedor con display: flex.
  2. Añada flex-wrap: wrap para que los bloques bajen a otra fila cuando falte espacio.
  3. Use flex-grow, flex-shrink y flex-basis en lugar de anchos fijos en píxeles.
  4. Si hace falta, cambie la disposición con media queries (reglas de CSS que se aplican según el ancho de la pantalla).
  5. No cambie el orden visual con order ni con row-reverse. El orden de lectura y del tabulador debe coincidir con el que se ve.

Cómo comprobarlo

  1. Abra la página en una ventana de 1280 píxeles de ancho.
  2. Amplíe al 400 % con Ctrl y +. También sirve estrechar la ventana hasta 320 píxeles en las herramientas del navegador (tecla F12, modo dispositivo).
  3. Compruebe que no aparece barra de desplazamiento horizontal y que no se pierde texto ni ninguna función.
  4. Recorra la página con el tabulador y confirme que el foco sigue el orden en que se ven los bloques.

Ejemplo

Ficha de producto con foto y descripción que se ponen una debajo de otra cuando no caben juntas.

<div class="ficha">
  <div class="foto"><img src="silla.jpg" alt="Silla de oficina gris"></div>
  <div class="texto"><h2>Silla de oficina</h2><p>Respaldo regulable.</p></div>
</div>
<style>
  .ficha { display: flex; flex-wrap: wrap; gap: 1rem; }
  .foto { flex: 1 1 15rem; }
  .texto { flex: 2 1 20rem; }
</style>
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 C31 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.

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:

  1. 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;
  2. 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

  1. 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.
  2. Ampliar al 400 %.
  3. Para el contenido que se lee horizontalmente, comprobar que todo el contenido y la funcionalidad están disponibles sin desplazamiento horizontal.
  4. 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

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.

Solicitar una auditoría

Basado en la técnica C31 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.