G204Dejar que el texto se reajuste al estrechar la ventana

Por qué es importante

Tener que mover la página a los lados en cada línea es agotador. Se pierde el hilo y cuesta encontrar el principio de la siguiente línea.

Afecta mucho a personas con baja visión que agrandan el texto o estrechan la ventana sin ayudas técnicas. También a personas con discapacidad cognitiva, que leen mejor en columnas estrechas. Es una técnica para el criterio 1.4.8 (nivel AAA).

Cómo se hace

1. Defina el ancho de los bloques de texto en porcentajes, por ejemplo width: 90%.
2. Si quiere limitar la longitud de las líneas, use max-width en em o ch, no un ancho fijo.
3. Evite anchos fijos en px o pt en artículos, noticias y otros textos largos.
4. Revise también los elementos que hay dentro del texto, como tablas o imágenes anchas, para que no fuercen a la columna a ensancharse.

Cómo comprobarlo

1. Abra una página con un texto largo, como una noticia o una convocatoria.
2. Estreche la ventana del navegador hasta una cuarta parte del ancho de la pantalla.
3. Compruebe que se puede leer cada línea entera sin desplazarse a los lados.

Ejemplo

Columna de texto que se adapta a la ventana y a la vez no deja líneas demasiado largas.

/* Mal: obliga a desplazarse si la ventana es estrecha */
.noticia { width: 960px; }

/* Bien: se adapta al ancho disponible */
.noticia { width: 90%; max-width: 40em; }