Text not sufficiently resizable

zoom/viewport-locked

WCAG success criterion: 1.4.4 (level AA)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Visual Presentation
Default severity: high
axe-core rule: meta-viewport

Why we flag this

Users with low vision lose content when zooming in.

Fixed pixel values, overflow:hidden.

What the rule checks

Scope. meta name=viewport elements of the document (also when inserted by script).

Expectation. Fails at the meta element when it disables zooming (user-scalable=no or 0) or caps maximum-scale below 2, which prevents resizing text to 200 percent. Values are parsed as browsers do: comma, semicolon or whitespace separate pairs, whitespace around '=' belongs to the pair, case does not matter. maximum-scale=1.9 fails, 2 does not (that is zoom/viewport-scale-limited). No viewport meta at all is zoom/viewport-missing, not this id.

Source. WCAG 2.2 SC 1.4.4 Resize Text; CSS Device Adaptation / viewport meta 'parsing the content attribute'

Detection: shared; needs dom.

Failing example

The check reports a violation here. Corpus case restrictive_viewport. The page may contain further findings for other rules.

restrictive_viewport.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Restrictive viewport meta corpus case</title>
</head>
<body>
    <main>
        <h1>Page with a zoom-disabling viewport meta tag</h1>
        <p>The viewport meta tag above sets user-scalable=no.</p>
    </main>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case visual_viewport_scale_two. 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>

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