This document provides information about the Acquia Web Governance accessibility check:
Meta viewport is preventing 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. This 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.
When zoom is restricted, other users are affected. This includes anyone who uses a small screen like a smartphone, where text and interface elements can be hard to see. Without the ability to pinch-to-zoom, users may experience frustration or eye strain, and might not be able 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.
Who
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 to allow user scaling
The following viewport meta tag ensures that users can freely zoom in and out on the webpage. It sets the user-scalable meta tag 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. It sets the user-scalable meta tag 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
This section provides information on how to identify and fix the issue.
How to identify it
The Acquia 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.
How to fix it
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.
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 Acquia Web Governance accessibility check:
Meta viewport is preventing 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. This 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.
When zoom is restricted, other users are affected. This includes anyone who uses a small screen like a smartphone, where text and interface elements can be hard to see. Without the ability to pinch-to-zoom, users may experience frustration or eye strain, and might not be able 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.
Who
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 to allow user scaling
The following viewport meta tag ensures that users can freely zoom in and out on the webpage. It sets the user-scalable meta tag 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. It sets the user-scalable meta tag 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
This section provides information on how to identify and fix the issue.
How to identify it
The Acquia 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.
How to fix it
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.
Refer to the ACT rules section below, which includes a link to a complete technical explanation of this check.
Web Governance