Accesibilidad

Por qué bloquear el zoom con pellizco excluye a los visitantes con baja visión

Un ajuste que algunas webs usan para verse 'más limpias' puede hacer que una página sea completamente ilegible para alguien que necesita hacer zoom.

Qué es

Esta comprobación examina específicamente si la etiqueta meta viewport de una página incluye ajustes que desactivan el zoom — lo más habitual, user-scalable=no o maximum-scale=1 añadidos a la misma etiqueta que, por lo demás, es necesaria para la adaptabilidad móvil. Estos añadidos se usaban a veces en el pasado para evitar que un doble toque accidental hiciera zoom sin querer, pero tienen un efecto secundario grave y no deseado: bloquean el zoom por completo, incluso cuando un visitante quiere deliberadamente hacer zoom con los dedos.

Esto es distinto de simplemente no tener ninguna etiqueta viewport (lo cual causa un problema diferente, puramente visual, tratado en nuestras otras guías sobre el viewport) — esto trata específicamente de una etiqueta viewport que está presente pero se ha configurado para impedir activamente el zoom.

En qué afecta

Muchos visitantes con baja visión dependen del zoom con pellizco como su forma habitual de leer cómodamente cualquier contenido web, ajustando el nivel de zoom al tamaño que funcione para su propia visión en una página dada. Bloquear esa capacidad no crea solo una molestia — para alguien que realmente la necesita, puede hacer que el contenido de una página sea completamente ilegible, sin más, sin importar lo bien diseñado que esté el resto de la página.

Esto se menciona explícitamente en las WCAG (las pautas estándar de accesibilidad web), que exigen que el zoom no se desactive precisamente por lo directamente que afecta a las personas con baja visión — se considera uno de los fallos de accesibilidad más graves y evitables, precisamente porque elimina una capacidad que el propio navegador ya proporciona por defecto.

Cómo solucionarlo

  1. Revisa la etiqueta meta viewport de tu página en busca de user-scalable=no o un valor de maximum-scale igual o inferior a 1.
  2. Elimina esas dos partes concretas si están presentes, dejando intacto el resto de la etiqueta (width=device-width, initial-scale=1).
  3. Si el objetivo original era evitar un zoom accidental por doble toque en un elemento interactivo concreto, resuélvelo con un estilo más específico en ese elemento en lugar de desactivar el zoom para toda la página.
  4. Si usas un creador de webs, esto rara vez lo configura la plataforma por defecto — revisa cualquier fragmento de código personalizado que hayas añadido a la sección <head> de la página.
  5. Prueba después en un teléfono real intentando hacer zoom con los dedos en la página para confirmar que ahora responde con normalidad.

Comprueba si tu propia web tiene este problema

Launch Readiness analiza tu web en busca de esto y ~50 problemas más antes del lanzamiento, en segundos — gratis, sin registro.

Hacer un análisis gratis