F88Texto justificado que dificulta la lectura

Por qué es importante

Al justificar un texto, cada línea tiene espacios de distinto tamaño. A veces los huecos se juntan de una línea a otra y forman «ríos» blancos que bajan por el párrafo.

• A las personas con dislexia o con dificultades de atención les cuesta seguir la línea y no perderse.
• Las personas con baja visión que usan zoom ven los huecos aún más grandes.
• En columnas estrechas, como en el móvil, el efecto empeora mucho.

Este fallo afecta al criterio 1.4.8, de nivel AAA.

Cómo evitarlo

1. Alinee los párrafos a la izquierda con text-align: left (o start, que respeta los idiomas que se escriben de derecha a izquierda).
2. Revise la hoja de estilos y quite text-align: justify de los textos largos: noticias, bases de convocatorias, fichas de producto.
3. Elimine el atributo antiguo align="justify" de párrafos y celdas.
4. Configure el editor del gestor de contenidos para que no ofrezca el botón «Justificar», o explique al equipo de redacción que no lo use.

Cómo comprobarlo

1. Abra la página en un navegador y mire los bloques de texto. Fíjese en si el borde derecho de las líneas queda recto.
2. Si queda recto, abra las herramientas del navegador (F12) y seleccione el párrafo.
3. En el panel de estilos, busque text-align: justify. Si aparece en un texto largo, hay fallo.
4. Busque también en el código fuente el atributo align="justify".

Ejemplo

El primer estilo justifica el texto y provoca el fallo; el segundo lo alinea a la izquierda.

/* Incorrecto: texto justificado */
.noticia p {
  text-align: justify;
}

/* Correcto: alineado al inicio de la línea */
.noticia p {
  text-align: start;
}