Users should be able to zoom and scale the text up to 500%
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.
Never take zoom control away — users decide how big text should be.
Overview
Why this matters
Users who need larger text depend on browser/device zoom. If zoom is restricted, reading and form completion can fail for low-vision users.
How to fix this issue
Do not restrict zoom in the viewport meta tag. Remove `user-scalable=no`, `maximum-scale`, and restrictive `minimum-scale` values. Ensure content/functionality remains available when text is effectively resized to at least 200%.
Developer Guidance
Apply a shared head-template rule across apps to prevent restrictive viewport values. Pair this with CSS resilience checks at high zoom: no clipped labels, no hidden controls, no fixed-height text containers. Use component visual tests at 200% and optionally higher internal QA zoom targets.
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 Implementation
Before
<!-- Dashboard layout prevents zoom entirely -->
<meta name="viewport" content="initial-scale=1, user-scalable=no">After
<!-- Zoom enabled; users can enlarge text freely -->
<meta name="viewport" content="width=device-width, initial-scale=1">CSS Example (Guidance)
/* Ensure page layout adapts when zoomed */
body {
max-width: 70rem;
margin: auto;
padding: 1rem;
}
img, video {
max-width: 100%;
height: auto;
}Manual Testing
- 1. Inspect the viewport meta tag and confirm zoom is not restricted.
- 2. Test pinch zoom on a real mobile device.
- 3. Test browser zoom/text resize to at least 200% and verify no loss of content/functionality.
- 4. Check form-heavy screens for clipping/overlap (labels, validation, helper text).
- 5. Fix layout/CSS issues instead of adding restrictive viewport flags.
Related Perceivable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance