Viewport meta tag prevents zooming to 500%

zoom/viewport-scale-limited

WCAG success criterion: 1.4.4 (level AA)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Visual Presentation
Default severity: medium
axe-core rule: zoom/viewport-scale-limited

Why we flag this

Users with low vision cannot magnify the page content enough.

maximum-scale in the viewport meta tag set below 5.

What the rule checks

Scope. meta name=viewport elements that allow at least 200 percent zoom.

Expectation. A best-practice finding at the meta element when maximum-scale is at least 2 but below 5: 1.4.4 is met, but users who need more magnification are capped. maximum-scale=2 is reported, 5 is not; below 2 is zoom/viewport-locked instead and not reported twice. Not a WCAG failure (auditmysite currently files it under 1.4.4, see the G6 report).

Source. Best practice beyond WCAG 2.2 SC 1.4.4 (zoom capped between 200 and 500 percent)

Detection: shared; needs dom.

Failing example

The check flags this for review. Corpus case visual_viewport_scale_two, element meta#vp. The page may contain further findings for other rules.

visual_viewport_scale_two.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>Viewport limiting zoom to 200 percent</title>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Recipe collection</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Viewport limiting zoom to 200 percent</h1>
  <p>Mix flour, water and salt, then let the dough rest for an hour.</p>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case visual_viewport_scale_five. The page may contain further findings for other rules.

visual_viewport_scale_five.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
<title>Viewport allowing zoom to 500 percent</title>
</head>
<body>
<header>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <p>Recipe collection</p>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</header>
<main id="main">
  <h1>Viewport allowing zoom to 500 percent</h1>
  <p>Mix flour, water and salt, then let the dough rest for an hour.</p>
</main>
<footer><p>Footer text</p></footer>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.