G179Evitar que el texto ampliado se salga de su caja

Por qué es importante

Las personas con baja visión suelen agrandar solo el texto, sin ampliar el resto de la página. Si una caja tiene una altura fija, el texto ampliado se sale de ella o queda oculto.

En la práctica, se pierden párrafos de una noticia, el final de un aviso o el texto de un botón. La persona ni siquiera sabe que falta información.

Cómo se hace

1. Deje que el texto salte de línea de forma natural. No use white-space: nowrap en bloques de texto.
2. Evite fijar la altura de las cajas con texto. Use min-height en lugar de height si necesita un mínimo.
3. Si una caja debe tener un tamaño fijo, añada overflow: auto para que aparezca una barra de desplazamiento cuando el texto no quepa.
4. No use overflow: hidden en contenedores de texto, porque oculta lo que sobra.
5. Pruebe las columnas, tarjetas y menús con el texto al doble de tamaño.

Cómo comprobarlo

1. Aumente el tamaño del texto al 200 %. En Firefox puede usar «Ver» > «Zoom» > «Ampliar solo el texto».
2. Recorra la página y compruebe que todo el texto se ve completo.
3. Compruebe que ninguna caja tapa a otra y que los botones y enlaces siguen funcionando.

Ejemplo

La tarjeta tiene anchura fija, pero su altura crece con el texto; el panel de avisos, de altura limitada, muestra una barra de desplazamiento.

.tarjeta-noticia {
  width: 18rem;
  min-height: 10rem; /* crece si el texto no cabe */
}
.panel-avisos {
  max-height: 12rem;
  overflow: auto; /* barra de desplazamiento, nunca texto oculto */
}