Fallo Común F104 de WCAG 2.1: Contenido recortado o superpuesto al ajustar el espaciado del texto

Jano Llorca Lis

La accesibilidad digital garantiza que los usuarios puedan consumir el contenido sin barreras, independientemente de sus necesidades. Uno de los problemas recurrentes en diseño web es cuando el espaciado del texto se ajusta y provoca que el contenido se recorte o se superponga, dificultando la lectura.

Según las WCAG 2.1, el criterio 1.4.12: Espaciado del Texto establece que los usuarios deben poder modificar el espaciado del texto sin perder información o funcionalidad. Sin embargo, un error común ocurre cuando las cajas de contenido no se expanden para acomodar estos cambios, lo que puede afectar a usuarios con baja visión o dislexia que dependen de mayores espacios entre letras y palabras para mejorar la legibilidad.

Acerca de este fallo

Este fallo ocurre cuando el contenido se corta, se solapa o desaparece al ajustar el espaciado del texto dentro de los parámetros recomendados por WCAG.

¿Por qué incumple las WCAG?

Cuando el contenido no se adapta correctamente a los cambios en el espaciado, se incumple el criterio 1.4.12 de las WCAG, ya que:

Los usuarios no pueden personalizar el espaciado entre líneas, palabras o caracteres sin que el contenido pierda legibilidad.
Se bloquea la experiencia de navegación para personas con baja visión o dificultades de lectura.

¿Cuándo ocurre este fallo?

Cuando se usa overflow: hidden; en CSS, evitando que el contenido se expanda al ajustar el espaciado.
Al utilizar contenedores con altura fija (height) sin permitir crecimiento dinámico.
En diseños que dependen de posicionamiento absoluto, impidiendo la redistribución del texto.

Ejemplos

Ejemplo incorrecto 1: Texto que se superpone

El siguiente código muestra un bloque de texto dentro de un contenedor con altura fija. Si el usuario aumenta el espaciado de línea (line-height), el texto se desbordará y se sobrepondrá con el contenido siguiente.

<div style=»font-size:100%; width:130px; height:125px; border: thin solid gray;»>
<p style=»margin:0;»>Ahora es el momento de actuar y mejorar la accesibilidad web.</p>
</div>
<p style=»margin:0;»>El diseño inclusivo beneficia a todos.</p>

🔴 Problema: Si el usuario aplica un line-height mayor, el texto se desbordará y se solapará con el párrafo siguiente.

Solución correcta: permitir crecimiento dinámico

Para solucionar este problema, el contenedor debe permitir crecimiento dinámico en altura y evitar restricciones rígidas que impidan el ajuste del contenido.

<div style=»font-size:100%; width:130px; min-height:125px; border: thin solid gray;»>
<p style=»margin:0;»>Ahora es el momento de actuar y mejorar la accesibilidad web.</p>
</div>
<p style=»margin:0;»>El diseño inclusivo beneficia a todos.</p>

✅ ¿Qué mejora?: Usamos min-height en lugar de height, permitiendo que el bloque se expanda si el espaciado de texto aumenta.

Ejemplo incorrecto 2: Texto recortado por `overflow: hidden;`

El siguiente código oculta el texto que se extiende más allá del contenedor debido al uso de overflow: hidden;.

<div style=»font-size:100%; width:130px; height:95px; overflow:hidden; border: thin solid gray;»>
<p>Ahora es el momento de actuar y mejorar la accesibilidad web.</p>
</div>

🔴 Problema: Si el usuario aumenta el espaciado entre caracteres o líneas, parte del contenido será recortado y quedará ilegible.

Solución correcta: evitar overflow: hidden;

Para corregir este problema, evitemos overflow: hidden; y permitamos el crecimiento dinámico del contenido.

<div style=»font-size:100%; width:130px; min-height:95px; border: thin solid gray;»>
<p>Ahora es el momento de actuar y mejorar la accesibilidad web.</p>
</div>

✅ ¿Qué mejora?: Eliminamos overflow: hidden; y utilizamos min-height en lugar de height para evitar el recorte del texto.

Ejemplo correcto: Solución ideal

Para garantizar que el contenido no se recorte ni se solape al ajustar el espaciado del texto, debemos utilizar contenedores flexibles y evitar restricciones rígidas en altura y desbordamiento.

<div class=»contenedor»>
<p class=»texto»>Ahora es el momento de mejorar la accesibilidad web garantizando un espaciado adecuado.</p>
</div>

✅ ¿Qué mejora?:

Se usa min-height en lugar de height, permitiendo que el contenido crezca.
Se evita overflow: hidden; para prevenir el recorte del texto.
Se asegura una correcta separación con line-height, letter-spacing y word-spacing.
El contenido sigue siendo legible incluso cuando el usuario ajusta el espaciado del texto según sus necesidades.

Errores comunes y cómo evitarlos

Errores frecuentes

Usar contenedores con altura fija (height) en lugar de min-height.
Aplicar overflow: hidden;, lo que oculta el texto cuando se expande.
No probar la accesibilidad con distintos ajustes de espaciado de texto.

Cómo evitar estos errores

Utilizar min-height en lugar de height para permitir expansión.
Evitar overflow: hidden; en bloques de texto.
Probar cambios en espaciado de texto con herramientas como Stylus Extension o configuraciones del navegador.

Preguntas frecuentes

¿Cómo puedo probar si mi sitio cumple con el criterio 1.4.12?

Puedes aplicar los ajustes recomendados de espaciado en el texto con herramientas como Stylus Extension para Chrome o Firefox y verificar que no haya recortes o solapamientos.

¿Debo evitar por completo overflow: hidden;?

No siempre, pero no debe usarse en contenedores de texto si puede afectar la legibilidad al aumentar el espaciado.

¿Qué valores de espaciado debo permitir?

De acuerdo con WCAG 2.1, el usuario debe poder configurar:

Altura de línea: 1.5 veces el tamaño de la fuente.
Espaciado entre párrafos: 2 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.

¿Este fallo afecta solo a personas con discapacidad?

No, afecta a todos los usuarios que desean personalizar el texto para mejorar la legibilidad, incluyendo personas con baja visión, dislexia o incluso usuarios generales que prefieren mayor espaciado.

Recursos relacionados

Pruebas y validación

Procedimiento

Revisar el contenido en un viewport amplio (1280px).
Ajustar el espaciado del texto a los valores recomendados (altura de línea, espaciado de palabras, letras y párrafos).
Observar si el contenido se recorta, solapa o desaparece.

Resultados esperados

✅ Si el contenido sigue visible y legible con los ajustes de espaciado, cumple con WCAG 2.1.
❌ Si el contenido se corta, se solapa o desaparece, falla el criterio 1.4.12 y debe corregirse.

Garantizar que el contenido sea legible y accesible con distintos niveles de espaciado es clave para la usabilidad. Evitar alturas fijas, overflow: hidden; y posicionamientos absolutos es esencial para que los usuarios puedan personalizar la lectura sin perder información.

🚀 ¿Necesitas ayuda para mejorar la accesibilidad de tu web? Contáctanos y optimiza tu sitio para todos los usuarios.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.