What This Rule Checks
The meta viewport tag is crucial for defining how a webpage adapts to different screen sizes and devices, such as mobile phones and tablets. When not properly configured, users may experience issues such as text being too small to read or the inability to zoom, particularly affecting users with low vision or cognitive disabilities who rely on zoom functionality to make content more readable. Ensuring the viewport is configured to support zoom and scaling enhances accessibility for all users.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.
Why This Matters
Disabling zoom prevents low-vision users from enlarging content to a readable size. An estimated 246 million people have moderate to severe distance vision impairment. This violates WCAG 1.4.4 (Resize Text) and is a critical accessibility barrier.
How to Fix
To ensure accessibility, configure the viewport properly by allowing users to zoom and scale content. Avoid disabling zoom features, as this can create barriers for users who need to enlarge text or navigate content on small screens.
Code Examples
<!-- Disables pinch-to-zoom -->
<meta
name="viewport"
content="width=device-width, user-scalable=no">
<!-- Limits zoom to 1x -->
<meta
name="viewport"
content="width=device-width, maximum-scale=1.0">
Copy
<!-- Allows user scaling (recommended) -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Explicitly allows scaling -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=5.0">
Copy
Common Mistakes to Avoid
- Adding user-scalable=no to prevent layout issues on mobile.
- Setting maximum-scale=1.0 which effectively disables zoom.
- Not testing the page at 200% and 400% zoom levels.
- Using viewport units (vw, vh) for font sizes which don’t respect zoom.
AI Auto-Fix Available
This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.
Tip: Page-level metadata and settings affect the entire browsing experience. Language declarations, viewport settings, and page titles are foundational to accessibility and affect every user on every page load.
Related WCAG Criteria
- 1.4.4: Resize text