Do not disable zoom with meta viewport
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Users must always be able to zoom — never take control away.
Why this matters and how to fix it
Why this matters
Many users rely on pinch-to-zoom or browser zoom to read text comfortably. If zooming is disabled, users with low vision or cognitive fatigue may struggle to read or understand content, making the interface effectively unusable.
How to fix this issue
Set the viewport meta tag to `width=device-width, initial-scale=1` and remove `maximum-scale` and `user-scalable=no`. Users must be able to zoom to at least 200% without loss of content or functionality.
Developer guidance
Add a lint rule or CI check to block `user-scalable=no`, `maximum-scale=1`, and `minimum-scale=` patterns. Review global layout and responsive CSS to ensure content remains usable when zoomed.
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">Real-World Examples
Before
<meta name="viewport" content="user-scalable=no"> <!-- Zoom disabled → low-vision users cannot enlarge text -->After
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Zoom enabled → text enlargement supported -->CSS Example (Guidance)
/* Ensure layout scales gracefully when zooming */
body {
max-width: 60rem;
margin: 0 auto;
padding: 1rem;
}Manual testing
- 1. Inspect <meta name="viewport"> in the page <head>.
- 2. Ensure the content attribute does NOT contain: `user-scalable=no`, `maximum-scale`, or `minimum-scale`.
- 3. On a mobile device or emulator, attempt pinch-to-zoom.
- • Expected: User can zoom freely.
- 4. In a desktop browser, zoom to 200% (Cmd/Ctrl + '+').
- • Expected: No horizontal scrolling and no loss of content or functionality.
- 5. If layout breaks at high zoom, refactor responsive CSS — not the viewport settings.
Trusted by organizations across Europe working toward WCAG and EAA conformance