What does this accessibility issue mean?
Issue summary: Text scaling and zooming are disabled in the viewport meta tag
If a viewport meta tag specifies a large initial scale for text, it can cause content to appear too small on mobile devices, making it difficult for users to read and interact with.
Allowing for appropriate text scaling and zooming across all device types ensures users can view the page content without straining their eyes. Website content should be accessible and easy to read and interact with regardless of device type or large-text settings that may be preferred by users with visual or cognitive impairments.
Solution:
Ensure <meta name=”viewport”> elements can scale a significant amount.
Example HTML violation: Text scaling and zooming disabled (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0">
<title>Non-Accessible Webpage</title>
</head>
<body>
<h1>Welcome to My Non-Accessible Page</h1>
<p>This page restricts users from zooming or scaling content on mobile devices.</p>
</body>
</html>The above HTML violates the meta-viewport-large accessibility rule because of the meta tag that includes the maximum-scale attribute. According to accessibility practices like the WCAG 2 rule, it is important to allow users to zoom or scale the content as required. Therefore, the meta viewport tag should not restrict the maximum scale.
How to fix "Text scaling and zooming disabled (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">The above tag defines viewport properties as follows:
width=device-widthmakes the layout viewport match the device's width, which is typically necessary for responsive design.initial-scale=1.0sets the initial zoom level when the page loads.
