SiteLint documentation and guidelines

Pinch to zoom

Description

Rule ID: zoom-disabled

When a user uses two fingers and pinches to zoom in or out on their device, this is known as pinch-to-zoom.

This rule determines if a given page contains a <meta name="viewport"> tag with either of the following:

  • A content attribute with a user-scalable="no" or user-scalable="0" parameter
  • A content attribute with a maximum-scale
  • A content attribute with a minimum-scale

Purpose

When reading text on a smartphone, tablet, or device with a touchpad, people who are older or have limited vision frequently employ the “pinching to zoom” technique. How can you guarantee that users can access the content on your responsive website using the “pinching to zoom” technique?

Use the appropriate HTML5 code for the viewport <meta> element.

How to fix it

Remove the user-scalable="no", maximum-scale and minimum-scale parameter from the viewport <meta> tag.

Recommended code:

<meta name="viewport" content="width=device-width, initial-scale=1">

Standard

Accessibility, WCAG 2.1, Success Criteria 1.4.4