Page title, frames and zoom Rule

Do not block pinch zoom on phones meta-viewport

The viewport meta tag tells phones how to scale the page. Two of its options, user-scalable=no and a maximum-scale below 2, stop people pinching to zoom. For anyone with low vision that locks the page at a size they cannot read. Use width=device-width, initial-scale=1 and nothing more.

WCAG 2.2 AA 1.4.4 Resize Text

Websight reports this as Zooming and scaling must not be disabled

Who it affects

Someone with macular degeneration reading the museum's opening times on their phone pinches to zoom, nothing happens, and the 14 pixel text stays 14 pixels.

Someone in bright sunlight, or who has left their glasses at home cannot enlarge the text to read a platform number.

Someone with a hand tremor zooms in to make a small link bigger and easier to tap, and cannot.

Broken versus fixed

The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.

Broken
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Pinching on a phone does nothing. Some browsers ignore the restriction; many do not.

Fixed
<meta name="viewport" content="width=device-width, initial-scale=1">

The page fits the screen and can be zoomed up to the browser's limit, usually 500%.

Test it by hand in two minutes

  1. Open the page on a phone and pinch. The page should enlarge.
  2. View the page source and read the viewport meta tag. Delete user-scalable=no and any maximum-scale.
  3. In Chrome DevTools, toggle the device toolbar (Ctrl+Shift+M) and check the tag in the Elements panel; emulation does not always honour the restriction, so trust the source.
  4. Check the phone's own accessibility zoom still works (iOS: Settings, Accessibility, Zoom). It usually does, but it is not a substitute.

The fix

Before
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
After
<meta name="viewport" content="width=device-width, initial-scale=1">

The restriction is usually added to stop accidental zoom on a form. Fix the form instead: 16 pixel inputs stop iOS zooming on focus.

iOS zooming into inputs

Before
input { font-size: 14px; }
After
input { font-size: 16px; }

iOS Safari zooms into a field whose text is under 16 pixels. Setting the size to 16 removes the reason for blocking zoom.

Web app that wants a full-screen feel

Before
content="width=device-width, initial-scale=1, maximum-scale=1"
After
content="width=device-width, initial-scale=1, viewport-fit=cover"

viewport-fit controls the safe areas round the notch. It does not need maximum-scale.

Common mistakes

  • Setting maximum-scale=1.5; the scanner allows 2 or more, and WCAG wants text resizable to 200% at least.
  • Blocking zoom with touch-action: none or a JavaScript gesture handler instead, which the scanner cannot see.
  • Copying the tag from a game or kiosk template into a content site.
  • Thinking a responsive layout removes the need for zoom; people zoom to read, not to make the page fit.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level AA. It is one of the checks for:

The scanner reads the viewport meta tag and fails it when user-scalable=no is present or maximum-scale is below 2. It cannot detect zoom blocked by CSS or script, and cannot test on a real phone. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

not run AA Do not lock the page to portrait or landscape css-orientation-lock Some sites decide they only work in landscape and use a media query to rotate the whole page 90 degrees when the phone is held upright, or show a please rotate your device overlay. AA Text spacing must not be locked with !important avoid-inline-spacing Some people with dyslexia or low vision read far better with wider line, letter or word spacing, and they apply it with a browser extension or a bookmarklet. AA Buttons and links must be big enough to press target-size Every control you can click or tap needs to be at least 24 by 24 CSS pixels, or have enough empty space around it that a 24 pixel circle centred on it does not touch a neighbour. AA Text must have enough contrast with its background color-contrast Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.