Acerca de esta regla de accesibilidad
El elemento <meta name="viewport"> controla cómo se muestra una página en dispositivos móviles, incluyendo sus dimensiones y escala. Dos parámetros dentro de su atributo content pueden restringir el zoom:
-
user-scalable="no"— Desactiva completamente el pellizco para hacer zoom y otro escalado iniciado por el usuario en la página. -
maximum-scaleestablecido por debajo de 2 — Limita cuánto puede hacer zoom un usuario, impidiéndole alcanzar el nivel de zoom del 200% requerido por WCAG.
Ambas restricciones crean barreras serias para personas con baja visión. Muchos usuarios dependen del zoom para agrandar texto y elementos de interfaz a un tamaño legible. Cuando el zoom está deshabilitado o limitado, estos usuarios pueden no poder usar la página en absoluto. Las herramientas de magnificación de pantalla y el zoom nativo del navegador son estrategias de asistencia fundamentales, y restringirlas socava la accesibilidad de toda la página.
Esta regla se relaciona con el Criterio de Éxito 1.4.4 de WCAG 2.0/2.1/2.2: Cambiar el tamaño del texto (Nivel AA), que requiere que el texto pueda redimensionarse hasta el 200% sin pérdida de contenido o funcionalidad. Al bloquear el zoom por debajo de ese umbral, no cumples con este criterio. Este criterio de éxito existe porque la capacidad de agrandar contenido es una de las características de accesibilidad más básicas y ampliamente utilizadas en todas las plataformas.
Cómo solucionarlo
-
Elimina
user-scalable="no"del atributocontentde tu elemento<meta name="viewport">. Si está presente, bórralo o establécelo auser-scalable="yes". -
Elimina o incrementa
maximum-scale. Si usasmaximum-scale, establécelo a al menos2(que permite zoom del 200%). Mejor aún, elimínalo completamente para permitir zoom sin restricciones. - Prueba en dispositivos móviles después de hacer cambios. Verifica que el pellizco para hacer zoom funcione y que el contenido permanezca utilizable cuando esté ampliado al 200%.
Ejemplos
Incorrecto: El zoom está completamente deshabilitado
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
El parámetro user-scalable=no previene que los usuarios hagan zoom en absoluto.
Incorrecto: La escala máxima es demasiado restrictiva
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">
Establecer maximum-scale a 1.5 limita el zoom al 150%, que está por debajo del umbral requerido del 200%.
Correcto: El zoom está completamente permitido
<meta name="viewport" content="width=device-width, initial-scale=1">
Al omitir tanto user-scalable como maximum-scale, se preserva el comportamiento de zoom predeterminado del navegador y los usuarios pueden hacer zoom libremente.
Correcto: Permitiendo explícitamente zoom con una escala máxima suficiente
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, maximum-scale=5">
Aquí, user-scalable=yes permite explícitamente el zoom, y maximum-scale=5 permite hasta 500% de zoom, muy por encima del mínimo del 200%.
Correcto: Estableciendo maximum-scale exactamente a 2
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
Un maximum-scale de 2 permite zoom del 200%, cumpliendo con el requisito mínimo de WCAG. Permitir valores más altos es aún mejor, pero 2 es el valor mínimo aceptable.
Qué verifica esta regla
La regla axe meta-viewport inspecciona el elemento <meta name="viewport"> en el <head> de tu documento y verifica dos cosas:
-
El parámetro
user-scalableno está establecido ano(o0). -
El parámetro
maximum-scale, si está presente, no es menor que2.
Si cualquiera de estas condiciones se viola, la regla marca la página como teniendo una restricción de zoom que puede prevenir que usuarios con baja visión accedan al contenido.
Ayúdanos a mejorar nuestras guías
Detecta problemas de accesibilidad automáticamente
Rocket Validator escanea miles de páginas con Axe Core y el W3C Validator, encontrando problemas de accesibilidad en todo tu sitio web.