Fallo Común F94 de WCAG 2.1: Uso incorrecto de unidades de ventana gráfica para cambiar el tamaño del texto

Jano Llorca Lis

La accesibilidad web busca garantizar que todo el contenido sea adaptable para los usuarios, incluidos aquellos con discapacidad visual que dependen del ajuste de texto. Un problema común es el uso incorrecto de unidades de ventana gráfica (vw, vh, vmin, vmax) en CSS para definir el tamaño del texto.

Este problema incumple el Criterio de Conformidad 1.4.4 de WCAG 2.1 (Redimensionar texto), ya que impide que los usuarios aumenten el tamaño del texto sin perder contenido o funcionalidad.

En este artículo, exploraremos el Fallo F94, su impacto en la accesibilidad y las soluciones adecuadas para corregirlo.

Acerca de este fallo

El Fallo F94 ocurre cuando el tamaño del texto se define utilizando unidades de ventana gráfica (viewport units, como vw y vh) en lugar de unidades relativas adecuadas como em o %.

Causas del fallo:

Uso de vw (viewport width) para definir el tamaño del texto, lo que lo hace depender del ancho de la ventana.
Uso de vh (viewport height), lo que afecta el tamaño del texto según la altura de la pantalla.
Inhabilitación del ajuste de texto en navegadores, ya que vw y vh no responden a los controles de zoom o tamaño de fuente.

Impacto en la accesibilidad:

Afecta a usuarios con baja visión que dependen del zoom del navegador.
Puede causar superposición o recorte de contenido cuando se usa con otros estilos de diseño fijo.
Evita que las herramientas de asistencia ajusten correctamente la visualización del contenido.

Según WCAG 2.1, el contenido debe permitir redimensionar el texto hasta un 200% sin pérdida de funcionalidad ni dificultad en la lectura.

Ejemplos

Ejemplo incorrecto 1: Uso de vw en CSS para definir el tamaño del texto

.callout {
font-size: 3vw;
}

<p class=»callout»>Este texto cambia de tamaño según el ancho de la ventana</p>

🔴 Problema:

El tamaño del texto depende del ancho de la ventana, no del ajuste de tamaño de fuente del navegador.
Si el usuario aumenta la fuente desde la configuración del navegador, el tamaño del texto no cambia.

Solución correcta: Uso de unidades relativas como em o rem

.callout {
font-size: 1.5em;
}

<p class=»callout»>Este texto cambia de tamaño correctamente al ajustar el zoom del navegador</p>

✅ ¿Qué mejora?

em permite que el texto responda a la configuración de tamaño de fuente del usuario.
Se ajusta correctamente cuando se cambia el zoom del navegador.

Ejemplo incorrecto 2: Uso de vh para definir el tamaño del texto

.header-text {
font-size: 5vh;
}

<h1 class=»header-text»>Encabezado que depende de la altura de la ventana</h1>

🔴 Problema:

Si la altura de la ventana cambia, el tamaño del texto se altera de manera impredecible.
No respeta los controles de accesibilidad del navegador.

Solución correcta: Uso de porcentajes o rem

.header-text {
font-size: 2rem;
}

<h1 class=»header-text»>Encabezado accesible que se adapta correctamente</h1>

✅ ¿Qué mejora?

rem permite que el texto se base en el tamaño de fuente del usuario.
El usuario puede ajustar el tamaño del texto sin afectar la estructura del sitio.

Ejemplo correcto: Solución ideal

Para garantizar una accesibilidad óptima:

Usar unidades relativas (em, rem, %).
No depender de unidades de ventana gráfica (vw, vh) para definir el tamaño de texto.
Incluir media queries para ajustar el texto según el tamaño de pantalla.

body {
font-size: 100%; /* Permite ajustes desde el navegador */
}

p {
font-size: 1.2em;
}

@media (max-width: 600px) {
p {
font-size: 1em;
}
}

✅ ¿Qué mejora?

El usuario puede ajustar el tamaño del texto desde el navegador.
Se mantiene legible en todos los dispositivos y tamaños de pantalla.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar vw o vh para definir tamaños de texto.
Evitar que el usuario pueda ajustar el tamaño del texto desde el navegador.
No probar cómo el texto responde al zoom del navegador.

Cómo evitar estos errores:

Usar em, rem o % para definir tamaños de texto.
Probar el ajuste de tamaño de texto en distintos navegadores.
Incluir media queries para garantizar una visualización adecuada.

Preguntas frecuentes sobre el Fallo F94

¿Por qué no se deben usar vw o vh para definir el tamaño del texto?

Porque estos valores dependen del tamaño de la ventana y no responden al ajuste de fuente del usuario en el navegador.

¿Cuáles son las mejores unidades para definir tamaños de texto accesibles?

Las mejores opciones son:

em (relativo al tamaño de la fuente del elemento padre).
rem (relativo al tamaño de la fuente raíz).
% (proporcional a la configuración del usuario).

¿Cómo puedo probar si mi sitio tiene este problema?

Puedes realizar estas pruebas:

Ajustar el zoom del navegador y verificar si el texto cambia de tamaño.
Ajustar la configuración de tamaño de fuente en el navegador y revisar el resultado.
Usar herramientas de accesibilidad como axe DevTools o WAVE.

¿Este fallo ocurre en todos los navegadores?

Sí, en todos los navegadores modernos, ya que vw y vh no permiten que el usuario ajuste el tamaño del texto con los controles nativos.

¿Cómo puedo corregir este fallo en un sitio ya desarrollado?

Revisar el CSS y reemplazar vw y vh por em, rem o %.
Implementar media queries para mejorar la adaptabilidad del texto.

¿El fallo F94 afecta solo a texto, o también a otros elementos?

Este fallo afecta principalmente al texto, pero también puede causar problemas en botones o íconos si su tamaño se define con vw o vh.

Recursos relacionados

Pruebas y validación

Procedimiento

Ajustar el tamaño del texto con el zoom del navegador.
Cambiar el tamaño de fuente en la configuración del navegador.
Verificar si el texto aumenta hasta un 200% sin perder contenido o funcionalidad.

Resultados esperados

✅ Si el usuario puede aumentar el tamaño del texto sin afectar la funcionalidad, cumple con WCAG 2.1.
❌ Si el texto no cambia o causa problemas en el diseño, el contenido no es accesible y falla el criterio 1.4.4.

El uso correcto de unidades en CSS garantiza que el texto sea accesible y adaptable.

Usa em, rem o % en lugar de vw y vh.
Prueba el tamaño del texto con herramientas de accesibilidad.
Haz que tu sitio sea accesible para todos los usuarios.

♿ ¡Optimiza tu web para la accesibilidad! 🚀

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