Fallo común Fallos comunes WCAG 2.2
F104Fallo del criterio de conformidad 1.4.12 debido a que el contenido se recorta o se solapa al ajustar el espaciado del texto
En resumen
Este fallo se produce cuando el usuario amplía el interlineado, el espacio entre letras, entre palabras o entre párrafos hasta los valores que permite el criterio 1.4.12 y parte del texto queda cortado, oculto o montado sobre otro. Suele deberse a cajas de alto fijo con overflow:hidden o a elementos posicionados de forma absoluta. Perjudica a las personas con dislexia o baja visión que necesitan más espaciado para leer. Pruébelo con una hoja de estilos de usuario.
Ejemplo práctico
Este fallo aparece en tarjetas, avisos, pestañas y botones a los que se da una 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 por defecto el texto cabe, pero al pulsar «Aplicar espaciado del texto» (los valores del criterio 1.4.12) la última línea, con el horario o el documento que hay que llevar, desaparece.
<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>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Aviso con altura mínima que crece con el texto
Se sustituye height por min-height y se elimina overflow: hidden. La caja mantiene su tamaño de diseño, pero crece cuando el usuario aumenta el interlineado o el espaciado entre letras y palabras, y no se pierde texto.
<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>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Botones y pestañas con altura fija y
white-space: nowrapque cortan la etiqueta al aumentar el espaciado entre letras. - Tarjetas de producto o de noticia con
heightfija para igualar filas, que esconden la última línea del resumen o el precio. - Textos superpuestos a imágenes (carruseles, cabeceras) colocados con
position: absolute, que se salen de la imagen o se cortan. - Limitar las líneas con
-webkit-line-clampsin ofrecer otra forma de leer el texto completo.
Técnica completa: traducción al español del texto 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
overflowdel elemento contenedor enhidden; - 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.
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.
The quick brown fox jumps over the lazy dog.
Pruebas
Procedimiento
- Abrir la página y revisar el contenido disponible.
- 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:
- altura de línea de al menos 1,5 veces el tamaño de la fuente;
- espaciado posterior a los párrafos de al menos 2 veces el tamaño de la fuente;
- espaciado entre letras (tracking) de al menos 0,12 veces el tamaño de la fuente;
- espaciado entre palabras de 0,16 veces el tamaño de la fuente.
- 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
- Stylus Extension for Chrome (extensión Stylus para Chrome)
- Stylus Extension for Firefox (extensión Stylus para Firefox)
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F104 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
