Missing viewport declaration

zoom/viewport-missing

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: high
axe-core rule: zoom/viewport-missing

Why we flag this

On mobile devices the text appears below any readable size; zooming in forces horizontal scrolling. Desktop browsers are not affected.

No <meta name="viewport"> in the document.

What the rule checks

Scope. Every HTML document: there is no document the check does not apply to.

Expectation. A best-practice finding at the root element when the document has no meta name=viewport, neither in the markup nor inserted by script. Any viewport declaration, whatever its content, satisfies this id. No not-applicable case exists: every HTML document is in scope.

Source. Best practice (no WCAG criterion): without a viewport declaration mobile browsers lay out at desktop width and scale the page down; CSS Device Adaptation

Detection: shared; needs dom.

Failing example

The check flags this for review. Corpus case visual_viewport_missing, element html. The page may contain further findings for other rules.

visual_viewport_missing.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page without a viewport declaration</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>Page without a viewport declaration</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.