Técnica CSS WCAG 2.2
C21Dar un interlineado de 1,5 a 2 con line-height
Nombre oficial en el W3C: Especificar un interlineado en CSS
En pocas palabras
El interlineado es el espacio entre las líneas de un párrafo. Con la propiedad line-height de CSS se fija entre 1,5 y 2 veces el tamaño de la letra. Así el texto respira y es más fácil pasar de una línea a la siguiente sin perderse.
Por qué es importante
Con las líneas muy juntas, el ojo salta con facilidad a una línea equivocada. Les pasa sobre todo a personas con dislexia, con dificultades cognitivas o con baja visión.
Un interlineado amplio reduce ese esfuerzo. También mejora la lectura para cualquiera, por ejemplo en un móvil o en unas bases de convocatoria largas.
Cómo se hace
- Aplique
line-height: 1.5albodyo a los bloques de texto. - Use un número sin unidad, como
1.5. Así el espacio se calcula según el tamaño de la letra de cada elemento. - Evite valores fijos en píxeles, como
line-height: 18px. No crecen al ampliar la letra. - Puede usar valores algo mayores, hasta
2, en textos largos o de lectura difícil.
Cómo comprobarlo
- Abra la página en el navegador y mire los párrafos. Entre línea y línea debe haber un espacio claro.
- Con las herramientas del navegador (tecla F12), seleccione un párrafo.
- En los estilos calculados, compare
line-heightconfont-size. El primero debe ser entre 1,5 y 2 veces el segundo.
Ejemplo
Interlineado de 1,5 para todo el contenido de la página.
body {
line-height: 1.5;
}Para saber más, en nuestro blog
-
Tipografías accesibles para personas con dislexiaDescubre las tipografías más recomendadas para personas con dislexia. Aprende cómo elegir fuentes accesibles que mejoren la lectura
-
Dislexia y accesibilidad web: rompiendo barreras digitalesMejorando la accesibilidad web para personas con dislexia: cómo hacer que el contenido en línea sea más legible e inclusivo.
-
¿Cuáles son los diferentes tipos de dislexia?¿Sabes que la dislexia es más común de lo que parece? Un 13% de la población mundial la tiene. Aquí te enseñamos sus tipos y como identificarla
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 C21 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
Muchas personas con discapacidades cognitivas tienen dificultades para seguir las líneas de texto cuando un bloque de texto tiene interlineado sencillo. Proporcionar un espaciado de entre 1,5 y 2 les permite empezar una nueva línea con más facilidad una vez que han terminado la anterior.
Ejemplos
Establecer en el elemento una altura de línea de 1,5
En la hoja de estilos, defina las características del elemento.
body { line-height: 1.5; }Esto establece en 1,5 la altura de línea de todo el contenido del cuerpo del documento.
Pruebas
Procedimiento
- Abrir el contenido en un navegador.
- Comprobar que el espaciado entre las líneas de los bloques de texto está entre 1,5 y 2.
Resultados esperados
- La comprobación n.º 2 es verdadera.
Recursos
-
CSS3 Line spacing: the
line-heightproperty (interlineado en CSS3: la propiedadline-height). - Eric Meyer - Unitless line heights (alturas de línea sin unidades)
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 C21 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.