meta-viewport-zoom-enabled
La etiqueta meta viewport no debe desactivar el zoom
Comprueba que <meta name="viewport"> no establezca user-scalable=no ni maximum-scale por debajo de 2 (200%).
Ámbito de aplicación. Se aplica a elementos <meta name="viewport"> cuyo atributo content establece maximum-scale o user-scalable. Un content que no establece ninguno de los dos no puede restringir el zoom. Un documento mostrado en un frame no es aplicable: los navegadores ignoran su meta viewport, y la página hace zoom según indica su documento superior.
Resultado esperado. En la etiqueta meta viewport vigente, la última con content (una anterior queda sustituida, y se pregunta por ella si restringe el zoom): user-scalable está ausente, es yes, device-width, device-height, o un número fuera del rango -1 a 1; y maximum-scale está ausente, es device-width, device-height, negativo, o 2 o más. Cualquier otra cosa impide que el usuario amplíe el texto hasta el 200%, algo que exige WCAG 1.4.4 (Resize Text).
Qué informa un hallazgo.
reasons: los ajustes que restringen el zoom, uno por elemento, escritos como en el atributocontent(user-scalable=no,maximum-scale=1).
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Un maximum-scale de 5 (500%) sigue permitiendo un zoom muy por encima del 200% que exige WCAG 1.4.4.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
user-scalable=no desactiva por completo el zoom con gesto de pellizco.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
VIEWPORT_ZOOM_RESTRICTED_OVERRIDDEN
- En el panel Elements, localizar cada <meta name="viewport"> del head de la página y anotar cuál es el último.
- Abrir la página en un teléfono o una tableta, o en el modo de dispositivo de las herramientas para desarrolladores con la emulación táctil activada.
- Pellizcar para hacer zoom (o usar el zoom del navegador) e intentar ampliar el texto al 200 %.
- Si el zoom está bloqueado, comprobar si la página tiene su propia forma de agrandar el texto, como un ajuste de tamaño de texto. Solo cuenta si se puede usar con el teclado, hace el texto al menos el doble de grande y nada queda cortado ni se pierde.
Se cumple. El texto se puede ampliar al menos al 200 %, o el ajuste de tamaño de texto de la propia página, usable con el teclado, lo lleva al menos al 200 % sin perder contenido ni funciones.
No se cumple. El zoom está bloqueado o limitado por debajo del 200 % en el navegador probado y la página no ofrece una forma propia de ampliar el texto al 200 %, lo que incumple WCAG 1.4.4.