Fallo Común F69 de WCAG 2.1: Recorte o truncado de texto al aumentar su tamaño x 200

Jano Llorca Lis

La accesibilidad digital garantiza que todos los usuarios puedan leer y comprender el contenido sin restricciones visuales. WCAG 2.1 establece requisitos como el Criterio 1.4.4: Redimensionar texto, que exige que el texto pueda ampliarse hasta un 200% sin que se pierda información ni funcionalidad.

El fallo F69 ocurre cuando el cambio de tamaño del texto provoca que este se recorte, trunque o quede oculto, afectando la legibilidad y la navegación.

Según estudios de UX, más del 35% de los usuarios aumenta el tamaño del texto en sus navegadores para mejorar la lectura, y los problemas de visualización pueden llevar a una tasa de abandono del 50%.

Acerca de este fallo

El fallo F69 se produce cuando el contenido no es adaptable y, al aumentar el tamaño del texto en un 200%, este se trunca, se superpone o se oculta debido a malas prácticas de diseño en HTML y CSS.

Esto incumple el Criterio de Éxito 1.4.4 (Redimensionar Texto), afectando especialmente a:

Personas con discapacidad visual que dependen del aumento del texto para leer cómodamente.
Usuarios de lectores de pantalla y herramientas de ampliación.
Personas mayores con dificultades de visión.

Escenarios comunes del fallo:

Uso de overflow: hidden; en contenedores de texto.
Contenedores con tamaño fijo en píxeles (px en lugar de em o %).
Contenido absolutamente posicionado que no se ajusta dinámicamente.
Ventanas emergentes (pop-ups) que no permiten el ajuste del texto.

Ejemplos

Ejemplo incorrecto 1: Texto que se desborda fuera del contenedor

<div style="font-size:100%; width:120px; height:100px; border: thin solid gray;">
  Ahora es el momento de que todos los ciudadanos participen activamente.
</div>
<p>La accesibilidad web es esencial para todos.</p>

🔴 Problema: Al aumentar el tamaño del texto, este se sale del contenedor y oculta el contenido siguiente.

Solución correcta: Contenedor flexible con unidades relativas

<div style="font-size:1em; max-width:80%; height:auto; border: thin solid gray;">
  Ahora es el momento de que todos los ciudadanos participen activamente.
</div>
<p>La accesibilidad web es esencial para todos.</p>

✅ ¿Qué mejora?: El contenedor se adapta dinámicamente, permitiendo el aumento del texto sin perder información.

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

<div style="font-size:100%; width:150px; height:50px; overflow: hidden;
 border: thin solid gray;">
  La accesibilidad web garantiza inclusión para todos.
</div>

🔴 Problema: Al aumentar el tamaño del texto, este se corta y oculta sin permitir desplazamiento.

Solución correcta: Uso de `overflow: auto;` y ajuste de altura

<div style="font-size:1em; max-width:90%; height:auto; overflow: auto; border: thin solid gray;">
  La accesibilidad web garantiza inclusión para todos.
</div>

✅ ¿Qué mejora?: Permite ajuste dinámico del contenido, evitando pérdida de texto.

Ejemplo correcto: Solución ideal

<div style="font-size:1.2em; line-height:1.5; max-width:90%; border: thin solid gray;">
  Aumentar el tamaño del texto sin perder información es clave para la accesibilidad.
</div>

✅ ¿Qué mejora?:

Usa tamaños de fuente escalables (em).
Permite ajuste dinámico sin perder contenido.
Asegura legibilidad óptima con line-height adecuado.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar unidades fijas (px) en lugar de relativas (em, %).
Aplicar overflow: hidden; sin ofrecer alternativa de visualización.
No probar el contenido con un zoom del 200% en navegadores.

Cómo evitar estos errores:

Diseñar con CSS adaptable, permitiendo ajustes dinámicos.
Usar pruebas con zoom del 200% para validar accesibilidad.
Aplicar flexbox y grid CSS para diseño responsivo.

Preguntas frecuentes sobre el fallo F69

¿Por qué es importante permitir el redimensionamiento del texto?
Porque muchas personas con discapacidad visual dependen de la ampliación del texto para leer cómodamente.

¿Cómo se prueba si mi sitio cumple con el criterio 1.4.4?
Aumentando el tamaño del texto al 200% en el navegador y verificando que todo el contenido sigue visible y legible.

¿Puedo usar overflow: hidden; en algún caso?
Sí, pero solo si el usuario puede expandir o desplazar el contenido para verlo.

¿Qué unidades de medida son recomendables en CSS?
Usar em, % y rem en lugar de px para permitir escalabilidad.

¿Cómo afecta este problema a la experiencia del usuario?
Un texto truncado o inaccesible genera frustración y abandono del sitio web.

¿Cómo validar si mi web tiene este problema?
Usar herramientas de prueba de accesibilidad como WAVE o Lighthouse.

Recursos relacionados

Pruebas y validación

Procedimiento

Aumentar el texto al 200% usando la configuración del navegador.
Verificar que todo el texto siga visible y legible.

Resultados esperados

✅ Si el texto y controles se redimensionan sin truncarse ni ocultarse, entonces el contenido cumple con WCAG 2.1.
❌ Si hay pérdida de contenido, falla el criterio 1.4.4 y debe corregirse.

Permitir el aumento del texto sin que se trunque o pierda información es esencial para la accesibilidad web. Si quieres garantizar que tu sitio cumple con este criterio y mejorar la experiencia de tus usuarios, contáctanos ahora y optimiza tu accesibilidad web! 🚀

¿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.