• June 30, 2025

Avoid Disabling Zoom in Viewport Meta Tag

Rule ID: meta-viewport
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), EN 301 549

How to Fix the Problem

To ensure accessibility for users with low vision, modify the <meta name="viewport"> element so that it does not disable user zooming. Specifically:

1. Remove the user-scalable="no" attribute from the content value.

2. Ensure that the maximum-scale value is not less than 2.

Correct Example:

Incorrect Example:

By removing user-scalable="no" and allowing a higher maximum-scale, users can zoom in on content as needed, improving readability and usability—especially on mobile devices or for those with visual impairments.

Why it Matters

Preventing users from zooming on a webpage makes the content inaccessible to individuals with low vision who depend on screen magnifiers or built-in zoom features. When the user-scalable="no" attribute is used, it disables this critical functionality, effectively creating a barrier for users who need to enlarge content.

Furthermore, the Web Content Accessibility Guidelines (WCAG) require that content remains readable and usable when text is resized up to 200%. If the zoom functionality is disabled or constrained, it directly violates this standard, creating usability issues for millions of users with partial vision.

Accessible zooming is particularly important on mobile devices, where screen space is limited, and text may already be small. Ensuring zoom is enabled helps users better navigate, comprehend, and interact with digital content.

Rule Description

The <meta name="viewport"> tag must not include the user-scalable="no" parameter, and it must allow a maximum-scale of at least 2. These constraints are in place to guarantee that users can zoom in on content for better visibility.

The Algorithm (in simple terms)

1. Find the <meta name="viewport"> tag in the document.

2. Check if the content attribute includes user-scalable="no" → If it does, this fails the rule.

3. Check the maximum-scale value → If it is less than 2, this fails the rule.

4. Passes only if zoom is allowed and maximum-scale is 2 or more.