Meta Viewport
Serious - WCAG Level AA
The issue with the viewport meta tag arises when it is configured in a way that prevents users from resizing text or zooming in on the page. This typically occurs when the viewport is set with a fixed width or when the user-scalable property is set to no. Such configurations can hinder users with visual impairments who rely on zooming or text resizing to read content comfortably.
Why It Matters:
For users with low vision or other visual impairments, the ability to resize text or zoom in on content is crucial for readability. If a website disables these features, it can lead to frustration and make it difficult for users to access information. This is particularly important for compliance with WCAG 1.4.4, which states that text must be resizable up to 200% without loss of content or functionality.
How to Fix It:
To ensure that your website allows for text scaling and zooming, you should configure the viewport meta tag correctly. Here are the steps:
Locate the viewport meta tag in the
<head>section of your HTML document.Modify the content attribute to allow user scaling. You should avoid using fixed widths and ensure that
user-scalableis set toyesor omitted entirely.
Best Practices:
Use relative units (like
emorrem) for font sizes instead of fixed units (likepx) to enhance scalability.Test your website with various zoom levels to ensure that content remains accessible and functional.
Consider using media queries to adjust layout for different screen sizes and resolutions.
Common Mistakes:
Setting
user-scalable=noin the viewport meta tag, which explicitly disables zooming.Using fixed widths (e.g.,
width=device-width) without allowing for scaling, which can lead to layout issues when zoomed in.