Técnica CSS WCAG 2.2
C20Definir el ancho de las columnas con medidas relativas
Nombre oficial en el W3C: Usar medidas relativas para fijar la anchura de las columnas de modo que las líneas tengan de media 80 caracteres o menos cuando se cambia el tamaño del navegador
En pocas palabras
El ancho de las columnas de texto se define con unidades relativas, como em o porcentajes, y no con píxeles fijos. Así la persona usuaria puede conseguir líneas de unos 80 caracteres o menos. Además, la columna crece con la letra y el texto no se corta al ampliarlo.
Por qué es importante
Las líneas muy largas cansan. A algunas personas con dislexia o baja visión les cuesta encontrar el principio de la línea siguiente. Si pueden estrechar la ventana o ampliar la letra, leen mejor.
Con un ancho fijo en píxeles, eso no funciona. La columna no cambia, el texto ampliado se sale o queda cortado, y aparece la barra de desplazamiento horizontal.
Cómo se hace
- Defina el ancho de los bloques de texto en
em,rem,cho porcentaje, no enpx. - Una medida como
max-width: 40emdeja líneas cómodas y crece si la persona amplía la letra. - Use porcentajes, por ejemplo
width: 60%, cuando quiera que la columna se adapte al ancho de la ventana. - No hace falta limitar las líneas a 80 caracteres por defecto. Lo importante es no impedir que la persona lo consiga.
Cómo comprobarlo
- Abra las herramientas del navegador (tecla F12) y revise el
widthde las columnas de texto. Deben usar unidades relativas. - Estreche la ventana del navegador. El texto debe recolocarse y las líneas deben acortarse.
- Amplíe el texto al 200 %. La columna debe crecer y no debe cortarse ninguna palabra.
Ejemplo
Columna principal de un artículo con ancho máximo en em.
<style>
.articulo { max-width: 40em; margin: 0 auto; }
</style>
<div class="articulo">
<p>Texto del artículo...</p>
</div>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 C20 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
El propósito de esta técnica es garantizar que CSS se utilice de forma que permita a los usuarios ver el contenido de modo que la longitud de línea pueda ser, de media, de 80 caracteres o menos. Esto hace posible que los usuarios con determinadas discapacidades de lectura o de visión, que tienen dificultades para no perder el punto de lectura en líneas de texto largas, puedan ver el contenido e interactuar con él de forma más eficaz. Esta técnica también permite que la anchura de las columnas aumente a medida que crece el tamaño de la fuente, lo que reduce la posibilidad de que el texto quede recortado al aumentar su tamaño.
Tenga en cuenta que esta técnica no exige a los autores utilizar CSS para limitar la anchura de las líneas de texto a menos de 80 caracteres en la vista predeterminada. Más bien, la recomendación de usar medidas relativas en las maquetaciones CSS ayuda a garantizar que los autores no fijen la anchura de las columnas de un modo que impida a los usuarios ver el contenido con líneas de 80 caracteres o menos.
Ejemplos
En este ejemplo, la anchura del div se define en em en la hoja de estilos.
#main-content {max-width: 70em}Y el bloque de texto se colocaría dentro del div en el contenido.
<div id="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>En este ejemplo, la anchura del div se define en porcentaje en la hoja de estilos.
#main-content {width: 90%}Y el bloque de texto se colocaría dentro del div en el contenido.
<div id="main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
</div>Pruebas
Procedimiento
- Comprobar que las columnas están definidas en unidades relativas.
- Comprobar que la longitud de línea puede ajustarse a 80 caracteres o menos cambiando el tamaño de la ventana del navegador.
Resultados esperados
- Las comprobaciones n.º 1 y n.º 2 son verdaderas.
Recursos
- CSS Box Model Module Level 3
- Fixed, fluid and elastic layouts (maquetaciones fijas, fluidas y elásticas)
- Choose a comfortable measure - The Elements of Typographic Style Applied to the Web (elegir una medida de línea cómoda)
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 C20 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.