a11y/zoom-not-blocked

Why

People with low vision pinch to zoom. user-scalable=no or a small maximum-scale stops them on many mobile browsers, and text that cannot reach 200% fails Resize Text.

Fix

Use <meta name="viewport" content="width=device-width, initial-scale=1"> and nothing that limits scaling. In Next.js remove userScalable: false and maximumScale from the exported viewport. Fix layout problems that zoom reveals instead of blocking zoom.

Examples

<!-- bad -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- good -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Sources

• WCAG 2.2, Understanding SC 1.4.4 Resize Text
• MDN, the viewport meta tag

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/zoom-not-blocked