avoid-inline-spacing
El estilo en línea no debe impedir a los usuarios aumentar el espaciado del texto
Comprueba que, cuando un estilo en línea fuerza line-height, letter-spacing o word-spacing con !important, el valor ya alcanza el espaciado que los usuarios deben poder aplicar (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em), de modo que al usuario no le queda nada que sobrescribir.
Ámbito de aplicación. Se aplica a un elemento renderizado con texto visible propio cuyo atributo style declara line-height, letter-spacing o word-spacing como !important con un valor real. Una palabra clave general de CSS (inherit, initial, unset, revert) no especifica ningún espaciado propio y queda fuera del alcance.
Resultado esperado. Cada una de estas declaraciones ya cumple la métrica propia de WCAG 1.4.12 para esa propiedad, expresada como múltiplo del tamaño de fuente: line-height de al menos 1.5, letter-spacing de al menos 0.12, word-spacing de al menos 0.16. Un valor forzado que ya satisface el criterio no le deja al usuario nada que sobrescribir.
Qué informa un hallazgo.
properties: las propiedades de espaciado a las que se refiere el hallazgo. Cada elemento esline-height,letter-spacingoword-spacing. En unfail, o en texto que puede no ajustarse nunca a la línea siguiente, son las que se fuerzan por debajo de la métrica; enINLINE_SPACING_NOT_RESOLVABLE, aquellas cuyo valor no se pudo determinar.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<p style="letter-spacing:2px !important">Spaced text</p>
El letter-spacing forzado está por encima de la métrica mínima de WCAG 1.4.12.
<p style="line-height:1.2 !important">The toy brought back fond memories of being lost in the rain forest.</p>
!important fuerza un line-height por debajo del mínimo de 1.5, y los propios estilos de la página no pueden sobrescribirlo.
<p style="line-height:1 !important">Opening hours</p>
El texto es lo bastante corto como para caber en una línea, así que puede que nunca se ajuste, y el criterio solo se aplica al texto que se ajusta.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
INLINE_SPACING_NOT_RESOLVABLE
- Inspeccionar el elemento que indica el informe y leer el valor de espaciado !important de su atributo style.
- En la pestaña Computed de las herramientas para desarrolladores, leer el line-height, letter-spacing o word-spacing resultante en píxeles y compararlo con 1,5 veces, 0,12 veces o 0,16 veces el tamaño de la fuente.
- Aplicar el espaciado de texto (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espaciado entre párrafos 2em) con !important, por ejemplo mediante una hoja de estilo de usuario o un bookmarklet; como gana el propio estilo en línea !important del elemento, anotar también los valores que conserva.
- Estrechar hasta 320 píxeles CSS y comprobar si el texto queda cortado o se superpone.
Se cumple. El valor forzado alcanza el espaciado que el usuario debe poder aplicar, o el texto no pasa a otra línea, o no se pierde nada al aplicar el espaciado.
No se cumple. El valor forzado está por debajo de la métrica en un texto que pasa a otra línea y el texto no admite el espaciado del usuario sin pérdida, lo que incumple WCAG 1.4.12.
INLINE_SPACING_NO_SOFT_WRAP
- Inspeccionar el elemento que indica el informe y anotar qué propiedad de espaciado fuerza su atributo style con !important.
- Estrechar la ventana hasta 320 píxeles CSS de ancho (o ampliar al 400 %) y comprobar si el texto llega a pasar a una segunda línea.
- Aplicar el espaciado de texto (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espaciado entre párrafos 2em) con !important, por ejemplo mediante una hoja de estilo de usuario o un bookmarklet; como gana el propio estilo en línea !important del elemento, anotar también los valores que conserva.
- Comprobar si algún texto queda cortado, se superpone o queda oculto.
Se cumple. El texto no puede pasar a otra línea (se queda en una línea o se desplaza) y nada queda cortado ni se superpone, así que el criterio no se aplica.
No se cumple. El texto sí pasa a otra línea y, con el espaciado forzado, las líneas se superponen o el texto queda recortado, lo que incumple WCAG 1.4.12.
INLINE_SPACING_SHORT_TEXT
- Inspeccionar el elemento que indica el informe y anotar qué propiedad de espaciado fuerza su atributo style con !important.
- Estrechar la ventana hasta 320 píxeles CSS de ancho (o ampliar al 400 %) y comprobar si el texto corto pasa a ocupar dos líneas.
- Aplicar el espaciado de texto (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em, espaciado entre párrafos 2em) con !important, por ejemplo mediante una hoja de estilo de usuario o un bookmarklet; como gana el propio estilo en línea !important del elemento, anotar también los valores que conserva.
- Comprobar si el texto queda cortado, se superpone o queda oculto.
Se cumple. El texto se queda en una línea con cualquier ancho, o pasa a otra línea sin que las líneas se superpongan ni se pierda texto.
No se cumple. El texto pasa a otra línea y el espaciado forzado hace que las líneas se superpongan o que el texto quede recortado, lo que incumple WCAG 1.4.12.