Zoom 200 por ciento y reflow: criterios WCAG 1.4.4 y 1.4.10

Zoom 200 por ciento: qué exige el criterio 1.4.4

El criterio 1.4.4 se dirige sobre todo a personas con una discapacidad visual leve, que pueden leer un texto ampliado sin recurrir a un magnificador de pantalla. Abarca el texto representado visualmente, incluidos los controles y las etiquetas formados por texto.

El W3C indica que el escalado es principalmente responsabilidad del agente de usuario, es decir, del navegador: zoom de toda la página, magnificación, ampliación solo del texto o un tamaño de texto configurado por el usuario. La responsabilidad del autor es crear un contenido que no impida al navegador escalarlo eficazmente. El contenido cumple el criterio si puede ampliarse hasta un 200 % con al menos un mecanismo de escalado de texto admitido por los agentes de usuario.

Hay dos matices importantes. Primero, 200 % significa hasta el doble de ancho y de alto. Segundo, si el mecanismo ofrece pasos intermedios entre el 100 % y el 200 %, no debe haber pérdida de contenido ni de funcionalidad en esos pasos: probar solo al 200 % no basta.

• Excluidos: los subtítulos y las imágenes de texto (estas últimas también las trata el criterio 1.4.5).
• No cubiertos: los contenidos y elementos de interfaz controlados por el agente de usuario o la plataforma, como la información emergente del atributo title o los diálogos de archivos del sistema.
• Si los agentes de usuario de una tecnología no ofrecen un mecanismo como el zoom de página completa, el autor debe proporcionarlo o garantizar que el contenido funcione con lo disponible.

Reflow a 320 píxeles CSS: qué exige el criterio 1.4.10

El criterio 1.4.10 exige que el contenido pueda presentarse sin pérdida de información ni de funcionalidad, y sin desplazamiento en dos dimensiones, para el contenido con desplazamiento vertical a un ancho equivalente a 320 píxeles CSS y para el contenido con desplazamiento horizontal a un alto equivalente a 256 píxeles CSS. En los idiomas que se escriben en horizontal (de izquierda a derecha o de derecha a izquierda), el texto se ajusta al ancho de la ventana; en los que se escriben en vertical, a su alto.

El problema es concreto: cuando las líneas sobrepasan el borde de la ventana, quien ha ampliado el contenido tiene que desplazarse de un lado a otro para leer cada línea. Pierde el hilo y debe hacer más esfuerzo. El W3C señala que el reflow también ayuda a quienes usan dispositivos móviles y a quienes hacen zoom en pantallas grandes.

¿Por qué 320 px? Según la nota del criterio, 320 píxeles CSS equivalen a una ventana inicial de 1280 píxeles CSS de ancho con un zoom del 400 %. El W3C recuerda que ese 400 % se aplica a cada dimensión y no al área. El valor coincidía además con las ventanas móviles pequeñas cuando se redactó el criterio. En la práctica, la barra de desplazamiento y la interfaz del navegador ocupan espacio: en una pantalla de 1280 × 1024 al 400 %, la ventana útil mide 318 × 236 píxeles.

Diferencia entre zoom 200 por ciento y reflow

Según el W3C, el criterio 1.4.4 se solapa con el objetivo del reflow: debería ser posible ampliar todo el texto al menos al 200 % cumpliendo a la vez el 1.4.10. En cambio, el reflow no exige por sí mismo ningún nivel de ampliación del texto. Ambos criterios se complementan sin sustituirse.

Los sitios responsive muestran bien cómo se relacionan. El criterio 1.4.4 se aplica a cada variante de diseño. El W3C pone el ejemplo de un texto de 20 px en una ventana de 1280 px: tras un zoom del 400 %, la página se reajusta a una ventana de 320 píxeles CSS y el autor puede fijar el texto en 10 px. Ese texto sigue mostrándose al doble de tamaño que con el ajuste predeterminado del navegador al 100 %, aunque su tamaño CSS se haya reducido a la mitad. No se exige alcanzar el 200 % de ampliación sin salir de un punto de ruptura concreto.

• 1.4.4: ¿el texto se duplica de tamaño sin perder nada, también en los pasos intermedios?
• 1.4.10: a 320 px de ancho (o 256 px de alto para el contenido con desplazamiento horizontal), salvo contenidos exentos, ¿se puede leer y usar todo, sin pérdidas, desplazándose en un solo sentido?
• Por encima del 200 %, el W3C observa que el zoom, que amplía texto, imágenes y zonas de diseño en un lienzo mayor, puede ser más eficaz que ampliar solo el texto; en ese caso se suele usar un producto de apoyo dedicado a la ampliación.

Las excepciones que conviene conocer

El criterio 1.4.10 excluye las partes del contenido que requieren una disposición en dos dimensiones para su uso o significado. La nota del criterio cita las imágenes necesarias para la comprensión (como mapas y diagramas), los vídeos, los juegos, las presentaciones, las tablas de datos (no las celdas individuales) y las interfaces en las que hay que mantener visible una barra de herramientas mientras se manipula el contenido. Para esas partes se admite el desplazamiento en dos dimensiones.

La excepción solo cubre la sección afectada y no se extiende automáticamente al resto. Alrededor de una tabla de datos colocada en su propio contenedor desplazable, los encabezados, los campos de búsqueda, la paginación y, en general, el resto del contenido deben seguir reajustándose. Las barras de desplazamiento en ambos sentidos a nivel de página causadas por un contenido exento pueden aceptarse si el resto del contenido solo se desplaza en un sentido, aunque es preferible limitar el desplazamiento bidimensional a la sección que lo necesita; por ejemplo, max-width: 100% en un vídeo evita una barra de desplazamiento innecesaria.

• Código y listas anidadas: la sangría transmite la jerarquía y puede ser necesaria para que el código funcione; el texto preformateado cuya disposición tiene significado (sangría de Python, arte ASCII) está exento.
• Carruseles: el desplazamiento horizontal dentro del carrusel es aceptable si cada panel cabe en 320 px.
• Documentos de tamaño fijo mostrados con dimensiones de impresión: pueden conservar su tamaño, pero los paneles asociados, como los comentarios, deben reajustarse a 320 px.
• En el 1.4.4, las etiquetas demasiado estrechas (columna de asunto de un webmail, celda de una hoja de cálculo) pueden truncarse si su contenido completo está disponible al recibir el foco o tras activarlas, y se informa al usuario de que puede acceder a él.

Fallos documentados de zoom y reflow

Los documentos «Understanding» de los criterios 1.4.4 y 1.4.10 recogen cuatro fallos (F69, F80, F94 y F102). A ellos se suman puntos de atención extraídos de las reglas de prueba y de las recomendaciones del W3C, que no son fallos catalogados como tales.

• F69: al ampliar el texto hasta un 200 %, el texto, las imágenes o los controles quedan recortados, truncados u ocultos.
• F80: los controles de formulario basados en texto no aumentan de tamaño al ampliar el texto.
• F94: uso incorrecto de las unidades de viewport para dimensionar el texto.
• F102: parte del contenido desaparece y deja de estar disponible una vez reajustada la página.
• Punto de atención: una etiqueta meta viewport que impide el zoom; la regla de prueba asociada comprueba precisamente que el meta viewport permita el zoom.
• Punto de atención: los contenidos fijos o «sticky», como encabezados y pies de página, que pueden dificultar o impedir la lectura en ventanas pequeñas; el W3C sugiere encarecidamente hacerlos estáticos en tamaños pequeños o permitir que el usuario active o desactive ese comportamiento, y recuerda que no deben ocultar el elemento que tiene el foco (criterio 2.4.11).
• Punto de atención: un vídeo más ancho que la ventana puede añadir una barra de desplazamiento innecesaria; max-width: 100% lo evita.

Cómo corregirlo: técnicas recomendadas por el W3C

Para el 1.4.4, entre las técnicas suficientes figuran usar una tecnología cuyos agentes de usuario habituales admitan el zoom, el diseño líquido, y asegurarse de que los contenedores de texto crezcan con el texto (contenedores dimensionados en em, tamaños de fuente en porcentaje, con nombre o en em, cálculo de tamaños y posiciones que siga el tamaño del texto). Otra vía es ofrecer en la página controles que amplíen progresivamente todo el texto hasta el 200 %, o garantizar que no se pierda contenido cuando el texto crece sin que sus contenedores cambien de ancho.

Para el 1.4.10, el W3C cita Flexbox para reajustar el contenido, las media queries y CSS grid para reorganizar columnas, el tratamiento de URL y cadenas de texto largas, y width, max-width y Flexbox para ajustar etiquetas y campos. Como técnicas aconsejables menciona las media queries para dejar de fijar encabezados y pies de página sticky, y max-width y height para ajustar las imágenes. Para cadenas largas, como claves de autenticación, se da como ejemplo mostrarlas truncadas con un enlace o un mecanismo para revelarlas.

En la práctica, la navegación principal puede plegarse en un menú «Más» y después en un botón de hamburguesa, sin pérdida de funcionalidad ni desplazamiento horizontal. Una página de artículo puede apilarse en una sola columna que quepa en 320 px. No hace falta apilarlo todo: cada sección solo tiene que poder leerse sin desplazamiento en dos dimensiones. El ejemplo de código siguiente, propio de este artículo, ilustra estos principios.

<!-- No bloquee el zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  /* Tamaños relativos: el texto sigue el ajuste del usuario */
  body { font-size: 100%; }
  .aviso { padding: 1em; min-height: 3em; } /* sin altura fija en px */

  /* Reflow con Flexbox */
  .tarjetas { display: flex; flex-wrap: wrap; gap: 1em; }

  /* Medios dentro de la ventana */
  img, video { max-width: 100%; height: auto; }

  /* En ventanas pequeñas, el encabezado deja de ser fijo */
  @media (max-width: 30em) {
    header { position: static; }
  }
</style>

Cómo probar el zoom 200 por ciento y el reflow

Una prueba manual reproduce las situaciones que describe el W3C. Compleméntela con una supervisión continua para detectar las regresiones que introducen las actualizaciones de sus plantillas.

• Haga zoom en el navegador por pasos del 100 % al 200 % y compruebe en cada paso que todo el texto sigue visible, que nada queda recortado o superpuesto y que los campos de formulario crecen.
• Pruebe también la ampliación solo del texto, si el navegador la ofrece.
• Configure una ventana de 1280 px de ancho y aplique un zoom del 400 %: compruebe que, salvo los contenidos que requieren disposición en dos dimensiones, solo hace falta desplazarse en vertical y que no ha desaparecido nada.
• Revise la navegación, los encabezados fijos, las tablas, los vídeos y las URL largas, y compruebe que el elemento con el foco no queda oculto.
• Algunos agentes de usuario, sobre todo navegadores móviles antiguos, no pueden ajustarse exactamente a esos valores; el criterio no exige que los dispositivos lo permitan. Pruebe con un navegador que sí lo permita.

Preguntas frecuentes

Más sobre el tema en Conformly

• Guía para corregir el zoom 200 % en HTML
• Ficha detallada del criterio RGAA 10.4
• Ficha detallada del criterio RGAA 10.11

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 1.4.4
• W3C — Comprendre 1.4.10