Espaciado de texto

Silktide encuentra elementos cuyos estilos en línea bloquean el espaciado del texto —letter-spacing, word-spacing o line-height— con !important en un valor por debajo del mínimo de WCAG, de modo que las personas usuarias no pueden ajustarlo.

Por qué es importante

Las personas con dislexia o baja visión a menudo necesitan el texto más espaciado para leerlo: líneas más altas, huecos más amplios entre letras y palabras. Lo consiguen con extensiones del navegador y hojas de estilo personalizadas que anulan el espaciado de una página.

Estas herramientas inyectan CSS normal a nivel de autor. Una declaración !important dentro del atributo style de un elemento prevalece sobre cualquier regla a nivel de autor, por específica que sea; es la única construcción de una página que esas herramientas no pueden anular. Cuando bloquea el espaciado por debajo de los mínimos, la persona usuaria queda, sencillamente, excluida.

El criterio de éxito 1.4.12 de (nivel AA) exige que el contenido soporte que las personas usuarias aumenten el espaciado del texto, como mínimo, a:

Altura de línea: 1,5 veces el tamaño de la fuente
Espaciado entre letras: 0,12 veces el tamaño de la fuente
Espaciado entre palabras: 0,16 veces el tamaño de la fuente

Cómo solucionarlo

Para cada elemento señalado, haga una de las siguientes cosas:

Quite la marca !important de la declaración en línea. Así, las herramientas de las personas usuarias podrán anularla y su diseño no cambiará para el resto.
Mueva la declaración a una hoja de estilo. Incluso con !important, las reglas en las hojas de estilo pueden ser anuladas por las herramientas de las personas usuarias.
Aumente el valor hasta el mínimo de WCAG si realmente es necesario dejar fijo el espaciado.

<!-- Falla: bloqueado por debajo del mínimo; las herramientas de las personas usuarias no pueden anularlo -->
<p style="line-height: 1.2 !important">…</p>

<!-- Corregido: anulable -->
<p style="line-height: 1.2">…</p>

<!-- También válido: bloqueado, pero con un valor que ya cumple el mínimo -->
<p style="line-height: 1.5 !important">…</p>

Cómo lo comprueba Silktide

Encuentra elementos cuyo atributo style declare letter-spacing, word-spacing o line-height con !important, y que contengan directamente texto visible.
Resuelve el valor declarado con respecto al tamaño de la fuente del elemento.
Informa del elemento cuando el valor bloqueado está por debajo del mínimo de WCAG para esa propiedad.

Esto refleja las reglas ACT del W3C para 1.4.12 (espaciado entre letras, espaciado entre palabras, altura de línea).

Silktide no marca el espaciado con !important en las hojas de estilo —las herramientas de las personas usuarias aún pueden anularlo— y no simula aplicar los aumentos de espaciado para detectar diseños rotos, algo que actualmente ninguna herramienta automatizada hace. Superar esta comprobación significa que nada en la página impide que las personas ajusten el espaciado; comprobar que su diseño sigue siendo legible con el espaciado ajustado es una prueba manual rápida con un marcador de espaciado de texto.

Solución de problemas

Las bibliotecas de componentes y los scripts incrustados a veces escriben estilos en línea con !important. Aun así, cuentan en contra de su página; revise la configuración del proveedor o trasládeles la incidencia.

El espaciado está bloqueado en un valor conforme

Los valores iguales o superiores a los mínimos de WCAG pasan incluso si están bloqueados: fijar line-height: 1.6 !important no perjudica a nadie, porque ya supera lo que las personas usuarias elevarían.