Español
Menú del sitio

text-spacing-content-loss

El texto sigue siendo legible cuando el usuario aumenta el espaciado del texto

automaticWCAG 1.4.12 (AA)confianza: mediumgravedad: seriousperceivable

Aplica el espaciado de texto de WCAG 1.4.12 en el navegador y comprueba que ningún texto quede recortado ni se superponga, y pregunta por las reglas de hoja de estilo que fuerzan el espaciado con !important.

Ámbito de aplicación. Se aplica a una página con texto visible. La pérdida de contenido necesita un diseño (un navegador): sin él, solo se leen las hojas de estilo.

Resultado esperado. WCAG 1.4.12: con el interlineado a 1,5 veces el tamaño de la fuente, el espacio tras los párrafos a 2 veces, el espaciado entre letras a 0,12 veces y el espaciado entre palabras a 0,16 veces, no se pierde contenido ni funcionalidad.

  • En un navegador, el espaciado se aplica como una hoja de estilo que prevalece sobre la de la propia página (salvo el !important en línea, que informa avoid-inline-spacing), y cada línea de texto se mide antes y después frente a las cajas que la recortan: las de su cadena de bloques contenedores con overflow: hidden o clip, o contain: paint, y el viewport en un eje en el que la página impide el desplazamiento, o para el texto de una caja fija, que no se desplaza con la página. Una línea que estaba dentro y termina al menos medio fuera (la mitad de su altura, o media em de ancho) falla: el contenedor corta ese texto (TEXT_CLIPPED). Se pregunta por una línea desplazada menos (TEXT_CLIPPED_PARTLY), y también por el texto que pasa a superponerse a otro texto con el que antes no se superponía (TEXT_OVERLAPS). Por el texto que mueve una animación que se repite indefinidamente (un ticker) se pregunta sea cual sea su desplazamiento (TEXT_CLIPPED_MOVING): pasa por el borde de todos modos, y un solo fotograma no permite saber si se pierde algo. Donde la página tiene el desplazamiento bloqueado, con ambos ejes del viewport ocultos mientras ya había contenido más allá de él, como detrás de un banner de cookies, se pregunta por el texto que el espaciado saca del viewport (VIEWPORT_SCROLL_LOCKED): el bloqueo suele ser un estado pasajero, y el motor no puede ver más allá de él. El texto dentro de un <marquee> se deja fuera: los navegadores lo mueven al margen de la Web Animations API, así que el motor no puede detenerlo, y su hallazgo dependería del momento en que se ejecutara el análisis; deprecated-elements-not-used pregunta por el marquee (2.2.2). Se pregunta por el texto que su caja ya cortaba antes del espaciado (un extracto de altura fija) cuando el espaciado corta líneas que mostraba enteras (TEXT_CLIPPED_FURTHER): el extracto se cortó a propósito, pero muestra menos. Una caja que crece con sus líneas, como hace line-clamp, muestra las mismas y se deja como está.
  • En cualquier entorno, se pregunta por una regla de hoja de estilo que fija line-height, letter-spacing o word-spacing por debajo de esos valores con !important (STYLESHEET_IMPORTANT): una herramienta que añade su propia hoja de estilo a la página no puede anularla, aunque una hoja de estilo del usuario sí. Un valor relativo al tamaño de la fuente se lee tal como está declarado, y uno calculado cumple el valor dentro del redondeo con el que los navegadores informan las longitudes, así que no se pregunta por una regla que fija exactamente el mínimo.
  • El espaciado se aplica con un elemento <style> o, cuando la Content Security Policy de la página lo bloquea, como una hoja de estilo que adopta el documento. Cuando ninguna de las dos opciones funciona, se pregunta por la página (SPACING_NOT_APPLIED) en lugar de medirla, y nunca pasa.

Sin diseño y sin ninguna regla así, la regla es notApplicable, con data.reason: 'noLayout'.

  • Solo se evalúa el texto dentro del ámbito del análisis (contextSelector) y no excluido (excludeSelectors). El texto de otras partes de la página se sigue midiendo, ya que el texto dentro del ámbito puede pasar a superponerse a él. Mientras haya un diálogo modal abierto, la página que hay detrás se deja fuera por completo: el navegador la hace inerte, y el análisis evalúa el diálogo.
  • Margen (overflow-px): del texto que una caja de recorte conserva entero, la línea que más cerca estuvo de quedar cortada. value es cuánto sobrepasa el borde de la caja, negativo mientras sigue dentro, frente a 2px, a partir de los cuales una línea queda parcialmente cortada (el primer hallazgo); context.axis y context.text indican qué borde y qué texto. Se mide donde el texto crece con más espaciado, el final en línea (la derecha, o la izquierda en texto de derecha a izquierda) y la parte inferior; un borde de inicio solo cuenta una vez que una línea lo ha sobrepasado. Un eje en el que la caja creció con el espaciado (un bloque de altura automática) sigue a su contenido y se deja fuera, y el texto vertical no recibe margen. Se deja fuera el texto que mueve una animación que se repite (un ticker), ya que su posición depende del punto en que se detuvo la animación, y también una caja que corta otro texto: eso es un hallazgo. Solo cuenta como cercana una línea que está a menos de 8px del límite (desde 6px dentro del borde), así que el texto más hacia el interior de su caja no da margen. measuredCount cuenta los pares de texto y caja de recorte comparados; como los hallazgos, el margen abarca los primeros 3.000 nodos de texto.

Qué informa un hallazgo.

  • text: el comienzo del texto, hasta 60 caracteres. No aparece en el hallazgo de una regla de hoja de estilo.
  • lines.shownBefore, lines.shownAfter (TEXT_CLIPPED_FURTHER): cuántas líneas del texto mostraba enteras su caja sin el espaciado y con él.
  • metrics.overflowPx (texto recortado): cuánto, en píxeles CSS, sobrepasó la línea el borde de la caja que la recorta, con el espaciado aplicado.
  • metrics.thresholdPx (texto recortado): cuánto puede sobrepasarlo antes de fallar: medio em en horizontal, o la mitad de la altura de la línea en vertical.
  • metrics.axis (texto recortado): x cuando la línea sobrepasó un lateral, y cuando sobrepasó la parte superior o inferior.
  • container.widthPx, container.heightPx (texto recortado): el tamaño de la caja que recorta, con el espaciado aplicado.
  • viewport.width, viewport.height (texto recortado o superpuesto): el viewport en el que se maquetó la página, en píxeles CSS. Un texto que cabe con un ancho puede quedar recortado con otro.
  • other (texto superpuesto): el texto con el que llega a superponerse.
  • selector, property, value (una regla de hoja de estilo): el selector de la regla y la declaración que fuerza el espaciado.

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.

Margen. Esta regla mide overflow-px en píxeles CSS, y el valor debe quedar por debajo del umbral. Cuando un resultado correcto quedó cerca del umbral, el campo margin del resultado indica el elemento que más se acercó sin dejar de cumplirlo, así que un resultado que un cambio pequeño haría cambiar se ve antes de que cambie. A diferencia de los campos de un hallazgo, es un contrato estable. Consulta Esquema de salida.

Ejemplos

passEn un navegador
<p>Opening hours today, and the rest of the week from nine to five.</p>

El párrafo no tiene tamaño fijo, así que el texto crece con el espaciado y no se pierde nada.

failEn un navegador
<style>
  .hours { width: 19ch; height: 20px; overflow: hidden; }
</style>
<div class="hours">Opening hours today</div>

Con interlineado de 1,5, espaciado entre letras de 0,12em y entre palabras de 0,16em, el texto pasa a una segunda línea que la caja corta. En jsdom, que no tiene diseño, la regla solo lee las hojas de estilo y pregunta por el espaciado forzado con !important.

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.

SPACING_NOT_APPLIED

  1. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important. La política de seguridad de la página no bloquea las reglas añadidas en el panel Styles.
  2. Desplazarse por toda la página y buscar texto que quede cortado, se superponga a otro texto o desaparezca.
  3. Donde el texto quede cortado, comprobar si la página ofrece una forma de mostrarlo entero, como un enlace «Leer más» o un botón que amplía el recuadro. Solo cuenta si se puede usar con el teclado y, con el espaciado aún aplicado, muestra el texto completo.
  4. Comprobar que los controles y los menús siguen funcionando y muestran todo su texto.

Se cumple. Todo el texto sigue visible y legible, o el texto cortado se puede mostrar entero con el teclado, y nada deja de funcionar con el espaciado aplicado.

No se cumple. Con el espaciado aplicado, algún texto queda cortado, se superpone o se pierde y no se puede mostrar entero de otra forma, lo que incumple WCAG 1.4.12.

STYLESHEET_IMPORTANT

  1. Anotar la regla, la propiedad y el valor que da el informe, y localizar en el panel Elements un elemento al que dé estilo.
  2. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  3. Comprobar en la pestaña Computed si el line-height, el letter-spacing y el word-spacing del elemento tienen ahora esos valores.
  4. Si no los tienen, dar al elemento los mismos valores en su propio estilo (la sección element.style al principio del panel Styles), como haría una hoja de estilos de usuario, y comprobar si su texto sigue siendo legible.

Se cumple. El espaciado del usuario sigue teniendo efecto en el elemento, o el contenido se lee bien sin él.

No se cumple. La regla !important de la página impide que se aplique el espaciado del usuario, lo que incumple WCAG 1.4.12.

TEXT_CLIPPED_FURTHER

  1. Localizar el extracto de texto que indica el informe y anotar cuántas líneas muestra completas.
  2. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  3. Contar las líneas que muestra ahora y comprobar si un enlace «leer más» u otra vía sigue llevando al texto completo.

Se cumple. El extracto sigue cumpliendo su función, y al texto completo se puede llegar de otra forma.

No se cumple. El espaciado corta contenido al que no se puede llegar de ninguna otra forma, lo que incumple WCAG 1.4.12.

TEXT_CLIPPED_MOVING

  1. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  2. Localizar el texto en movimiento que indica el informe y observarlo durante al menos un ciclo completo de su animación.
  3. Pausarlo si hay un control para ello, y comprobar que todo su texto se puede leer en algún momento.

Se cumple. Todas las partes del texto en movimiento se siguen pudiendo leer durante su ciclo.

No se cumple. Parte del texto nunca aparece completa con el espaciado aplicado, lo que incumple WCAG 1.4.12.

TEXT_CLIPPED_SCRIPT_SIZED

  1. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  2. Localizar el texto que indica el informe y esperar un momento: el propio script de la página puede redimensionar el recuadro que lo rodea para que quepa el texto más largo.
  3. Si sigue pareciendo cortado, estrechar o ensanchar un poco la ventana del navegador, o hacer clic en una zona vacía de la página, lo que hace que muchas páginas vuelvan a dimensionar sus recuadros.
  4. Leer el texto y comprobar que se muestra entero.

Se cumple. Cuando la página ha reaccionado, el recuadro se ajusta al texto y todo se puede leer con el espaciado aplicado.

No se cumple. El texto sigue cortado con el espaciado aplicado, incluso después de dar tiempo a la página para reaccionar, lo que incumple WCAG 1.4.12.

TEXT_CLIPPED_PARTLY

  1. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  2. Localizar el texto que indica el informe y observar el borde de la caja que lo corta.
  3. Leer el texto y comprobar si todavía se distingue cada letra, incluidos los trazos superiores e inferiores de las letras.
  4. Donde el texto quede cortado, comprobar si la página ofrece una forma de mostrarlo entero, como un enlace «Leer más» o un botón que amplía el recuadro. Solo cuenta si se puede usar con el teclado y, con el espaciado aún aplicado, muestra el texto completo.

Se cumple. Solo se corta una franja en el borde y todo el texto se sigue pudiendo leer, o el texto completo se puede mostrar de otra forma con el teclado, con el espaciado aún aplicado.

No se cumple. Parte del texto queda cortada y ya no se puede leer, y no se puede mostrar entera de otra forma, lo que incumple WCAG 1.4.12 (F104).

TEXT_OVERLAPS

  1. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  2. Localizar el texto que indica el informe y el texto con el que ahora se superpone.
  3. Leer ambos y comprobar si alguno se vuelve difícil de leer donde se superponen.

Se cumple. La superposición es solo una franja mínima en los bordes y ambos textos siguen siendo legibles.

No se cumple. Un texto se dibuja sobre otro de modo que alguno de los dos se vuelve ilegible, lo que incumple WCAG 1.4.12 (F104).

VIEWPORT_SCROLL_LOCKED

  1. Cerrar cualquier banner, diálogo o capa superpuesta que esté abierto en la página, para que la página pueda desplazarse.
  2. En el panel Styles de las herramientas para desarrolladores, añadir una regla de estilo nueva para * con line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, y una regla para p con margin-bottom: 2em !important.
  3. Desplazarse hasta el texto que indica el informe y comprobar que se puede alcanzar y leer.

Se cumple. Una vez cerrada la capa superpuesta, la página se desplaza y todo el texto se puede alcanzar y leer.

No se cumple. El texto sigue fuera de alcance con el espaciado aplicado, lo que incumple WCAG 1.4.12.

Ver código fuente