Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F94Tamaño de letra en unidades vw o vh que no crece con el zoom

Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.4 debido al uso incorrecto de unidades relativas a la ventana gráfica para el tamaño del texto

En pocas palabras

Las unidades vw y vh miden un porcentaje del ancho o del alto de la ventana. Si el tamaño del texto se define solo con ellas, el texto no crece al usar el zoom o el ajuste de tamaño de letra del navegador. La persona no puede ampliarlo al 200 %. Hay que usar rem o em, o combinarlas con vw.

Por qué es importante

Muchas personas con baja visión agrandan el texto con el zoom del navegador (Ctrl y +) o con el ajuste de tamaño de letra. Las personas mayores también lo hacen a menudo.

Con font-size: 3vw, el tamaño depende solo de la anchura de la ventana. Al hacer zoom, la ventana sigue igual de ancha y el texto apenas cambia. La única salida sería anular todos los estilos de la web, y eso suele romper el diseño.

Cómo evitarlo

  1. Defina el tamaño de letra con unidades relativas: rem o em.
  2. Si quiere un texto que se adapte a la pantalla, combine unidades: calc(1rem + 1vw) o clamp(1.5rem, 1rem + 2vw, 3rem). La parte en rem sí crece con el zoom. Después compruebe que el texto llega al 200 %.
  3. Otra opción es cambiar el tamaño con consultas de medios (@media) según el ancho de pantalla.
  4. Revise en especial los titulares grandes de portadas y banners, donde más se usa vw.

Cómo comprobarlo

  1. Abra la página y amplíe al 200 % con Ctrl y +.
  2. Compruebe que todos los textos se han hecho más grandes. Fíjese en los titulares y textos destacados.
  3. Pruebe también a subir el tamaño de letra en la configuración del navegador.
  4. Si algún texto no crece, inspecciónelo con F12 y mire si su font-size usa solo vw o vh.

Ejemplo

El primer titular no crece con el zoom; el segundo usa rem y cambia de tamaño con una consulta de medios.

/* Incorrecto: solo depende de la ventana */
.portada h1 {
  font-size: 4vw;
}

/* Correcto: rem y consulta de medios */
.portada h1 {
  font-size: 2rem;
}
@media (min-width: 60em) {
  .portada h1 { font-size: 3rem; }
}
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 F94 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.

Descripción

El objetivo de esta técnica es documentar el fallo que se produce cuando el texto no cambia de tamaño porque se han usado unidades relativas a la ventana gráfica para el texto. Como estas unidades son relativas a la ventana gráfica (viewport), el texto no puede redimensionarse con el zoom ni ajustando el tamaño del texto.

Existen varios métodos para aumentar y reducir el tamaño del texto y de otros contenidos, pero las unidades relativas a la ventana gráfica aplicadas al texto (generalmente mediante font-size en CSS) impiden la mayoría de los métodos disponibles. Los intentos de usar los controles del navegador para hacer zoom o ajustar el tamaño del texto no funcionarán. Solo funcionarán los métodos que anulan por completo el CSS, y estos pueden causar otros problemas, como que la maquetación se desmorone o que el texto se superponga.

Algunos usos de las unidades relativas a la ventana gráfica pueden no impedir el ajuste del tamaño del texto, pero si se usan como método principal para definir el tamaño del texto, es probable que provoquen un fallo del criterio de conformidad 1.4.4 Cambio de tamaño del texto.

Si se han usado consultas de medios (media queries) para ajustar el tamaño del texto o la unidad de medida en distintos tamaños de pantalla, puede que no se trate de un fallo de Cambio de tamaño del texto. Los controles en la propia página proporcionados por el autor también son una forma de superar los criterios de conformidad sobre cambio de tamaño del texto.

Ejemplos

Ejemplo de fallo 1

El siguiente fragmento de CSS y HTML usa unidades VW para definir el tamaño del texto.

/* CSS */
.callout {
  font-size:1vw;
}
<p class="callout">Text that scales by viewport units</p>

Ejemplo: página con un ejemplo de texto dimensionado en unidades vh.

Pruebas

Procedimiento

  1. Visitar la página que se va a probar.
  2. Usar cualquiera de los siguientes métodos para cambiar el tamaño del texto, cuando estén disponibles:
    • la función de zoom del navegador,
    • la función de ajuste del tamaño del texto del navegador,
    • los controles de la propia página para cambiar el tamaño del texto.
  3. Comprobar que el texto cambia de tamaño con alguno de los métodos anteriores y que puede ampliarse hasta el 200 % del tamaño predeterminado.

Resultados esperados

  • Si el último paso es falso, se da esta condición de fallo y el contenido falla el criterio de conformidad 1.4.4 Cambio de tamaño del texto.

Recursos relacionados

  • MDN CSS units (unidades de CSS en MDN), incluidas las unidades vh y vw.
  • Viewport percentage lengths (longitudes porcentuales de la ventana gráfica) en la especificación CSS Values and Units Module Level 4.

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