This document provides information about the related Acquia Optimize checks:
The content attribute of a meta element with the name attribute set to “viewport” must allow zoom functionality.
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.
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?”
This section provides some examples of the issue.
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.
The following viewport meta tag restricts users from zooming in and out on the webpage by explicitly setting user-scalable to "no".
<meta name="viewport" content="user-scalable=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 to fix it.
The Acquia Optimize 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.
Related accessibility conformance testing rules.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Fri Feb 07 2025 16:50:39 GMT+0000 (Coordinated Universal Time)