Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F104Texto que se corta al aumentar el espaciado entre líneas y letras

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.12 debido a que el contenido se recorta o se solapa al ajustar el espaciado del texto

En pocas palabras

Algunas personas cambian el espaciado del texto para leer mejor: más interlineado y más espacio entre letras, palabras y párrafos. El error es que, al hacerlo, el texto se corta, se tapa o se monta sobre otro. Suele pasar en cajas con altura fija que no crecen con su contenido.

Por qué es importante

Muchas personas con dislexia o baja visión leen mejor con más espacio entre líneas, letras y palabras. Lo aplican con una extensión del navegador o con una hoja de estilos propia.

Si la web no lo soporta, se pierde la parte del texto que no cabe. Puede ser el precio de una ficha de producto, el horario de un aviso o el texto de un botón.

Cómo evitarlo

  1. No dé altura fija (height) a las cajas con texto. Use min-height para que crezcan si hace falta.
  2. Evite overflow: hidden en contenedores de texto, salvo que haya otra forma de leerlo entero.
  3. No coloque texto con position: absolute sobre imágenes o cajas de tamaño fijo, porque no reserva espacio.
  4. En botones y pestañas, deje que el texto pase a otra línea. Evite combinar un ancho fijo con white-space: nowrap.
  5. Pruebe la página con los valores del criterio 1.4.12: interlineado de 1,5 veces el tamaño de letra, 2 veces tras cada párrafo, 0,12 entre letras y 0,16 entre palabras.

Ejemplo práctico

Este fallo aparece en tarjetas, avisos, pestañas y botones con altura fija para que «cuadren» en el diseño. Al aumentar el espaciado del texto (criterio 1.4.12), el contenido ya no cabe y se corta.

Así no: Aviso con altura fija y overflow: hidden

La caja tiene height: 96px y overflow: hidden. Con el espaciado normal, el texto cabe. Al pulsar «Aplicar espaciado del texto» se usan los valores del criterio 1.4.12. Entonces la última parte del aviso, con el horario o el documento que hay que llevar, desaparece.

Captura de pantalla del ejemplo incorrecto: Aviso con altura fija y overflow: hidden
Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto
<style>
  .aviso { width: 260px; height: 96px; overflow: hidden; border: 2px solid #744E9A; border-radius: 6px; padding: 8px 12px; }
  .aviso p { margin: 0; font-size: 16px; line-height: 1.25; }
  .espaciado .aviso p { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; margin-bottom: 2em !important; }
</style>
<button type="button" aria-pressed="false" onclick="this.setAttribute('aria-pressed', document.getElementById('zona').classList.toggle('espaciado'))">Aplicar espaciado del texto</button>
<div id="zona">
  <div class="aviso">
    <p>Registro municipal: atención con cita previa de lunes a viernes, de 9:00 a 14:00. Traiga su DNI.</p>
  </div>
</div>

Así sí: Aviso con altura mínima que crece con el texto

Se cambia height por min-height y se quita overflow: hidden. La caja conserva su tamaño de diseño. Pero crece cuando el usuario aumenta el interlineado o el espacio entre letras y palabras. No se pierde texto.

Pruébelo aquí:

Ver el código del ejemplo correcto
<style>
  .aviso { width: 260px; min-height: 96px; border: 2px solid #744E9A; border-radius: 6px; padding: 8px 12px; }
  .aviso p { margin: 0; font-size: 16px; line-height: 1.25; }
  .espaciado .aviso p { line-height: 1.5 !important; letter-spacing: .12em !important; word-spacing: .16em !important; margin-bottom: 2em !important; }
</style>
<button type="button" aria-pressed="false" onclick="this.setAttribute('aria-pressed', document.getElementById('zona').classList.toggle('espaciado'))">Aplicar espaciado del texto</button>
<div id="zona">
  <div class="aviso">
    <p>Registro municipal: atención con cita previa de lunes a viernes, de 9:00 a 14:00. Traiga su DNI.</p>
  </div>
</div>

Cómo comprobarlo

Bookmarklet o extensión de espaciado

  1. Aplicar a la página los valores del criterio 1.4.12. Se puede usar el bookmarklet «Text spacing» de Steve Faulkner o una hoja de estilos de usuario con la extensión Stylus.
  2. Los valores son: line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em y margen inferior de párrafo de 2em, todos con !important.
  3. Recorrer la página con el zoom al 100 %. Revisar tarjetas, botones, pestañas, menús, etiquetas de formulario y textos sobre imágenes.
  4. Anotar todo texto cortado, montado sobre otro contenido o que ya no se vea.

Herramientas del navegador

  1. Abrir las herramientas de desarrollo (F12) e inspeccionar la caja que corta el texto.
  2. En la pestaña Estilos (Styles), buscar height, max-height u overflow: hidden en esa caja o en las que la contienen.
  3. Buscar también elementos con position: absolute, que no reservan espacio.
  4. Desmarcar la altura fija o cambiarla por min-height. Si el texto vuelve a verse entero, esa era la causa.

Validación automática

  1. axe DevTools, WAVE y Lighthouse no aplican el espaciado del texto ni detectan este fallo. Hay que comprobarlo a mano.
  2. Algunas herramientas avisan de alturas fijas o de contenido que se desborda. Esos avisos solo son una pista y hay que revisarlos a mano.

Errores frecuentes en auditorías

  • Botones y pestañas con altura fija y white-space: nowrap. Al aumentar el espacio entre letras, la etiqueta se corta.
  • Tarjetas de producto o de noticia con height fija para igualar las filas. Esconden la última línea del resumen o el precio.
  • Textos sobre imágenes (carruseles, cabeceras) colocados con position: absolute. Se salen de la imagen o se cortan.
  • Limitar el número de líneas con -webkit-line-clamp sin ofrecer otra forma de leer el texto completo.
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 F104 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

Esta técnica se aplica al contenido textual creado en lenguajes de marcado que admiten propiedades de estilo del texto.

Descripción

El propósito de esta técnica es identificar y comprobar una condición de fallo en la que parte del contenido se recorta y resulta ilegible cuando el usuario modifica el espaciado del texto dentro de los límites establecidos en el criterio de conformidad Espaciado del texto. En general, este fallo se produce cuando el texto se presenta en un bloque de tamaño limitado que no se expande si aumenta el tamaño del contenido. Algunas de las formas en que esto puede ocurrir son:

  • establecer la propiedad overflow del elemento contenedor en hidden;
  • usar contenido posicionado de forma absoluta;
  • crear bordes que no son lo bastante grandes para el contenido cuando se aplica el nuevo espaciado de la fuente.

Ejemplos

El texto dentro de una caja se desborda y se solapa con el texto que hay debajo cuando se aplica el espaciado del texto.

El código siguiente es el que está implementado en el DOM antes de que el usuario aplique cualquier modificación del espaciado del texto mediante CSS. El texto se muestra correctamente dentro de la caja y no interfiere con el párrafo siguiente.

<div style="font-size:100%; width:130px; height:125px; border: thin solid gray;">
  <p style="margin:0;">Now is the time for all good men to come to 
   the aid of their country.</p>
</div>
<p style="margin:0;">The quick brown fox jumps over the lazy dog.</p>

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Esta es la vista DESPUÉS de que el usuario haya modificado el espaciado del texto con los valores de espaciado del criterio de conformidad. El texto se solapa con el párrafo que hay debajo.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

El texto dentro de una caja se recorta cuando se aplica el espaciado del texto.

El código siguiente es el que está implementado en el DOM antes de que el usuario aplique cualquier modificación del espaciado del texto mediante CSS. El texto se muestra correctamente dentro de la caja y no interfiere con el párrafo siguiente.

<div style="font-size:100%; width:130px;
 height:95px; overflow:hidden; border:thin solid gray;">
  <p>Now is the time for all good men to come to the aid of their country.</p>
</div>
<p>The quick brown fox jumps over the lazy dog.</p>

Esta es la vista predeterminada antes de que el usuario haya modificado el espaciado del texto. El texto se muestra correctamente dentro de la caja.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Esta es la vista DESPUÉS de que el usuario haya modificado el espaciado del texto con el espaciado máximo del criterio de conformidad: el texto queda recortado.

Now is the time for all good men to come to the aid of their country.

The quick brown fox jumps over the lazy dog.

Pruebas

Procedimiento

  1. Abrir la página y revisar el contenido disponible.
  2. Modificar el CSS de la página mediante una hoja de estilos de usuario, un bookmarklet, una extensión o una aplicación, con los valores indicados en el criterio de conformidad:
    1. altura de línea de al menos 1,5 veces el tamaño de la fuente;
    2. espaciado posterior a los párrafos de al menos 2 veces el tamaño de la fuente;
    3. espaciado entre letras (tracking) de al menos 0,12 veces el tamaño de la fuente;
    4. espaciado entre palabras de 0,16 veces el tamaño de la fuente.
  3. Comprobar si algún contenido queda recortado, oculto o se pierde debido al nuevo espaciado del texto.

Resultados esperados

  • Si la comprobación n.º 3 es verdadera, entonces se da la condición de fallo y el contenido falla el criterio de conformidad.

Recursos

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F104 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.