What does this accessibility issue mean?
Issue summary: Zooming or scaling is disabled in viewport meta tag
A viewport refers to the visible part of a webpage that appears on a user’s screen. The area and amount of a page that is visible will differ depending on the user’s device and settings.
You should include a viewport meta tag with instructions on how a browser should set a page’s dimensions and scaling on every page on your website.
For accessibility, it is important for a viewport meta tag to have zooming and scaling enabled so that the webpage appears in an easy-to-navigate manner regardless of the device type a visitor is using.
Solution:
Ensure <meta name=”viewport”> does not disable text scaling and zooming.
Example HTML violation: Zooming or scaling is disabled in viewport meta tag (WCAG Level AA Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<meta name="viewport" content="width=1024, user-scalable=no">
<title>Violation Example</title>
<h1>Zomming and Scaling Disabled</h1>
<p>This is sample webpage text</p>
</body>
</html>The above HTML violates the meta-viewport accessibility rule because it includes the user-scalable=no parameter in the meta viewport tag. This parameter disables user scaling, which is not accessible for individuals with low vision. It prevents them from zooming into the page to easily see and read the content.
To ensure compliance with accessibility guidelines, the user-scalable=no parameter needs to be removed from the meta viewport tag.
How to fix "Zooming or scaling is disabled in viewport meta tag (WCAG Level AA Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta name="viewport" content="width=1024, initial-scale=1">
<title>Corrected Example</title>
</head>
<body>
<h1>Zooming and Scaling Enabled</h1>
<p>This is sample webpage text</p>
</body>
</html>In above example, I have removed the user-scalable=no from meta viewport content, enabling the user to zoom in and out on page content. This is consistent with the "Meta viewport allows for zoom" rule from the Web Accessibility Initiative (WAI) ACT Ruleset, and helps to ensure that we meet the WCAG 2.0 Success Criterion 1.4.4 Resize text guideline.
Ensuring that users can scale the content allows people with low vision to enlarge text or images on the page to make them easier to perceive, thus providing a more accessible experience.
