This document provides information about the related accessibility checks:
Meta viewport allows for zoom.
What
The content attribute of a meta element with the name attribute set to “viewport” must allow zoom functionality.
It must not include user-scalable=no.
It must not set maximum-scale to a value less than 2.
Why
Many users rely on the zoom functionality to read and interact with digital content. On mobile devices, a common way to zoom is with two fingers to pinch and expand the screen. This allows users to enlarge text, buttons, and other elements for better visibility. However, when the zoom functionality is restricted, this natural interaction is blocked, which makes it difficult for users to adjust the content to their needs.
People with visual impairments, such as low vision, often depend on the zoom functionality to read text clearly. If they cannot enlarge content, they may struggle to access important information or complete essential tasks. Similarly, users with motor impairments who rely on screen magnification to interact with small interface elements may find navigation difficult when the zoom functionality is disabled.
Restricting zoom also affects anyone who uses a small screen, such as a smartphone, where text and interface elements can be harder to see. Without the ability to pinch-to-zoom, users may experience frustration, eye strain, or be unable to use the site effectively.
Ensure that zoom remains enabled so that users can maintain control over how they view content and improve the readability and accessibility.
This check affects the following users who have
Low vision: These users rely on zoom functionality to enlarge text and interface elements for better readability.
Motor impairments: These users need larger touch targets to interact accurately with interface components.
Small screens: These users benefit from the zoom functionality because it enhances the visibility of content and controls.
User story
Michael is a 45-year-old Director of Operations at a global tech company. He is an avid runner who participates in marathons and enjoys early morning jogs. He lives with his spouse and two teenage children, and he values family game nights.
"I love having the dashboard on my phone, it is super handy to check numbers on the go. But seriously, why can’t I just pinch to zoom? My eyes are not what they used to be, and I am sitting here squinting at the screen. It is such a no-brainer feature. How did they not think of that?”
Examples
This section provides some examples of the issue.
Example: Viewport meta tag allowing user scaling
The following viewport meta tag ensures that users can freely zoom in and out on the webpage by explicitly setting user-scalable to "yes".
<meta name="viewport" user-scalable=yes"/>
Avoid restrictive values like maximum-scale=1 to guarantee that users can adjust text size and layout according to their needs.
This allows users to maintain control over their browsing experience, especially those who rely on magnification tools or browser zoom functions to read content comfortably.
Example: Viewport meta tag preventing user scaling
The following viewport meta tag restricts users from zooming in and out on the webpage by explicitly setting user-scalable to "no".
When you prevent user scaling, your users cannot adjust text size and layout according to their needs.
This creates accessibility issues for individuals who rely on magnification tools or browser zoom functions to read content comfortably, and makes the webpage harder to use for people with visual impairments.
How
How to fix it.
The Web Governance platform flags <meta> elements with a name attribute set to "viewport" if the user-scalable property is set to "no" or if the maximum-scale property is set to a value lower than "2".
If the user-scalable value is set to "no," change it to "yes."
If the maximum-scale property is set to less than "2," either remove it completely or adjust the value to 2 or higher.
Please refer to the ACT rules section below, which includes a link to a complete technical explanation of this check.
This document provides information about the related accessibility checks:
Meta viewport allows for zoom.
What
The content attribute of a meta element with the name attribute set to “viewport” must allow zoom functionality.
It must not include user-scalable=no.
It must not set maximum-scale to a value less than 2.
Why
Many users rely on the zoom functionality to read and interact with digital content. On mobile devices, a common way to zoom is with two fingers to pinch and expand the screen. This allows users to enlarge text, buttons, and other elements for better visibility. However, when the zoom functionality is restricted, this natural interaction is blocked, which makes it difficult for users to adjust the content to their needs.
People with visual impairments, such as low vision, often depend on the zoom functionality to read text clearly. If they cannot enlarge content, they may struggle to access important information or complete essential tasks. Similarly, users with motor impairments who rely on screen magnification to interact with small interface elements may find navigation difficult when the zoom functionality is disabled.
Restricting zoom also affects anyone who uses a small screen, such as a smartphone, where text and interface elements can be harder to see. Without the ability to pinch-to-zoom, users may experience frustration, eye strain, or be unable to use the site effectively.
Ensure that zoom remains enabled so that users can maintain control over how they view content and improve the readability and accessibility.
This check affects the following users who have
Low vision: These users rely on zoom functionality to enlarge text and interface elements for better readability.
Motor impairments: These users need larger touch targets to interact accurately with interface components.
Small screens: These users benefit from the zoom functionality because it enhances the visibility of content and controls.
User story
Michael is a 45-year-old Director of Operations at a global tech company. He is an avid runner who participates in marathons and enjoys early morning jogs. He lives with his spouse and two teenage children, and he values family game nights.
"I love having the dashboard on my phone, it is super handy to check numbers on the go. But seriously, why can’t I just pinch to zoom? My eyes are not what they used to be, and I am sitting here squinting at the screen. It is such a no-brainer feature. How did they not think of that?”
Examples
This section provides some examples of the issue.
Example: Viewport meta tag allowing user scaling
The following viewport meta tag ensures that users can freely zoom in and out on the webpage by explicitly setting user-scalable to "yes".
<meta name="viewport" user-scalable=yes"/>
Avoid restrictive values like maximum-scale=1 to guarantee that users can adjust text size and layout according to their needs.
This allows users to maintain control over their browsing experience, especially those who rely on magnification tools or browser zoom functions to read content comfortably.
Example: Viewport meta tag preventing user scaling
The following viewport meta tag restricts users from zooming in and out on the webpage by explicitly setting user-scalable to "no".
When you prevent user scaling, your users cannot adjust text size and layout according to their needs.
This creates accessibility issues for individuals who rely on magnification tools or browser zoom functions to read content comfortably, and makes the webpage harder to use for people with visual impairments.
How
How to fix it.
The Web Governance platform flags <meta> elements with a name attribute set to "viewport" if the user-scalable property is set to "no" or if the maximum-scale property is set to a value lower than "2".
If the user-scalable value is set to "no," change it to "yes."
If the maximum-scale property is set to less than "2," either remove it completely or adjust the value to 2 or higher.
Please refer to the ACT rules section below, which includes a link to a complete technical explanation of this check.
Web Governance