What This Rule Checks
Users need the ability to zoom in and out of content without disrupting the layout or functionality of the page. Viewport meta tag settings should not restrict or prevent browser-level scaling, as doing so can create significant accessibility barriers — particularly for users with low vision who rely on pinch-to-zoom or browser zoom controls to comfortably read and interact with content.
Who Is Affected
This issue primarily affects: Low Vision users, who may use screen magnification, custom fonts, or high-contrast modes.
Why This Matters
Users with low vision may need to zoom content well beyond 200%. Allowing up to 500% zoom ensures users with significant visual impairments can access content. This goes beyond the WCAG AA requirement and represents AAA-level accessibility.
How to Fix
Allow User Zooming: Remove the user-scalable=”no” parameter from the <meta name=”viewport”> element to permit zoom functionality.
Set Maximum Scale Appropriately: Ensure that the maximum-scale parameter is not set below 5. This allows users to zoom in up to 500% on the page if needed.
Code Examples
<!-- Maximum scale too low for low-vision users -->
<meta
name="viewport"
content="width=device-width, maximum-scale=2.0">
Copy
<!-- Allows 500% zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
Copy
Common Mistakes to Avoid
- Setting maximum-scale to anything less than 5.0.
- Not testing the page at 500% zoom for layout issues.
- Using fixed pixel widths that break at high zoom levels.
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.