meta-viewport

Ensures <meta name="viewport"> does not disable text scaling and zooming.

Description

Because it disables text scaling and zooming, which are crucial for users with poor vision, the user-scalable=”no” parameter in the <meta name="viewport"> element must not be used in the document.

Why is it important?

Zooming on a website is disabled by the user-scalable="no" parameter inside the content attribute of the <meta name="viewport"> element. The user’s zooming options are limited by the maximum-scale setting. This presents a challenge for those with low vision who depend on screen magnifiers to see web page content clearly.

Examples

• Success:

  • The <meta> element is modified to make the page’s width to match the device’s screen width and set the page’s initial zoom level. The content remains within the viewport and can be zoomed by anyone to a size that is readable.

• Failure:

  • A page’s coding done in such a manner that when the browser viewport is zoomed, some content extends outside the viewport of the screen. A <meta> tag is set up to prevent browser zooming in an effort to solve that issue. As a consequence, text is consistently shown at the chosen size. However, because some text is now too small, some users find it challenging to comprehend.

How to fix?

Ensure that neither the maximum-scale parameter nor the user-scalable=”no” parameter are present in the <meta name="viewport"> element.

Tags

cat.sensory-and-visual-cues, wcag2aa, wcag144, ACT

References

• Deque University: meta-viewport