Zooming and scaling must not be disabled

Rule ID: meta-viewport
Ruleset: axe-core 3.1
User Impact: Critical
WCAG: 1.4.4

Still using Lighthouse?

Extend your test coverage, treat yourself to a better UI and standardize on a tool that will grow with you.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Low Vision

Requirement(s)

  • WCAG 2.0 (AA): MUST

WCAG Success Criteria

  • 1.4.4 Resize text

Section 508 Guidelines

  • Not specified, or not applicable

How to Fix the Problem

Remove the user-scalable="no" parameter from the content attribute of the <meta name="viewport"> element in order to allow zooming and ensure the maximum-scale parameter is not less than 2.

A meta viewport element tells the browser how to control the page's dimensions and to scale, but the ability to zoom can be disabled as a result of its use.

Note:

The browser's viewport focus does not affect the programmatic focus, but when the window is small, the area will only include a small part of the page, and the programmable focus will not follow the viewport.

Remove the user-scalable="no" parameter from the content attribute of the <meta name="viewport"> element in order to allow zooming.

Why it Matters

The user-scalable="no" parameter inside the content attribute of <meta name="viewport"> element disables zooming on a page. The maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision who rely on screen magnifiers to properly see the contents of a web page.

Users with partial vision and low vision often choose to enlarge the fonts on their browser to make text on the web easier to read. The browser's viewport focus is everything visible in the browser window at a given moment. Maximizing the browser to full size on a high-resolution monitor creates a large the viewport focus area and may include the entire web page.

If the browser window is small, the viewport focus area only includes a small part of the web page. The browser's viewport focus does not affect the programmatic focus. Users can scroll up and down the web page, but the programmatic focus does not follow the viewport. The Web Content Accessibility Guidelines calls for developers to design pages so that they support resize up to 200%.

Ensures that the user-scalable="no" parameter is not present in the <meta name="viewport"> element and the maximum-scale parameter is not less than 2.

Rule Description

The document must not use the user-scalable="no" parameter in the <meta name="viewport"> element because it disables text scaling and zooming which is essential to users with low vision.

The Algorithm (in simple terms)

Ensures that the user-scalable="no" parameter is not present in the <meta name="viewport"> element and the maximum-scale parameter is not less than 2.

Resources

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 3.1 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: