Users should be able to zoom and scale the text up to 500%
Accessibility isn’t only about avoiding violations — it’s about ensuring your product can be used confidently by everyone. This guide explains the principle of this rule, shows what goes wrong in real-world code, and provides a verified fix that meets WCAG and the European Accessibility Act (EAA).
Why this matters and how to fix it
Why this matters
Many users with low vision or on small screens rely on pinch-to-zoom or browser text scaling. Preventing zoom or limiting scaling makes text unreadable and violates WCAG success criteria for text resize and reflow.
How to fix this issue
Ensure the meta viewport tag allows user scaling. Avoid attributes like `user-scalable=no` or `maximum-scale`. Use a flexible setting such as `width=device-width, initial-scale=1` so users can zoom freely.
Developer guidance
Inspect each page’s `<meta name='viewport'>` tag. Lint or validate templates to prevent disabling zoom. Test with mobile devices—users must be able to pinch-zoom and enlarge text up to 500% without content loss or overlap.
Code examples
Incorrect Implementation
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Correct Implementation
<meta name="viewport" content="width=device-width, initial-scale=1">
Trusted by organizations across Europe working toward WCAG and EAA conformance