meta-viewport-zoom-enabled
Viewport meta tag must not disable zoom
Checks that <meta name="viewport"> does not set user-scalable=no or maximum-scale below 2 (200%).
Applies to. Applies to <meta name="viewport"> elements whose content attribute sets maximum-scale or user-scalable. Content setting neither cannot restrict zoom. A document shown in a frame is not applicable: browsers ignore its viewport meta, and the page zooms as its top document says.
Expectation. In the viewport meta tag in effect, the last one with content (an earlier one is replaced, and asked about if it restricts zoom): user-scalable is absent, yes, device-width, device-height, or a number outside the range -1 to 1; and maximum-scale is absent, device-width, device-height, negative, or 2 or more. Anything else stops the user zooming text to 200%, which WCAG 1.4.4 (Resize Text) requires.
What a finding reports.
reasons: the settings that restrict zoom, one per item, written as in thecontentattribute (user-scalable=no,maximum-scale=1).
These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.
Examples
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
maximum-scale of 5 (500%) still allows zooming well past the 200% WCAG 1.4.4 requires.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
user-scalable=no disables pinch-zoom entirely.
How to check
When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.
VIEWPORT_ZOOM_RESTRICTED_OVERRIDDEN
- In the Elements panel, find every <meta name="viewport"> in the page's head and note which one is last.
- Open the page on a phone or tablet, or in the developer tools' device mode with touch emulation.
- Pinch to zoom (or use the browser's zoom) and try to enlarge text to 200%.
- If zoom is blocked, check whether the page has its own way to make text bigger, such as a text size setting. It only counts if you can use it with the keyboard, it makes text at least twice as large, and nothing is cut off or lost.
Pass. Text can be zoomed to at least 200%, or the page's own text size setting, usable with the keyboard, makes it at least 200% without losing content or functions.
Fail. Zoom is blocked or capped below 200% in the browser tested and the page offers no way of its own to enlarge text to 200%, which fails WCAG 1.4.4.