Allow zooming in meta viewport tag to help people with visual disabilities

Last updated:

How to allow zooming in the meta viewport tag?

Remove user-scalable=no from the content attribute of your <meta name="viewport"> tag:

BAD:

prevents users from zooming

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
CORRECT:

allows zooming

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

A maximum-scale value below 5 also restricts zooming. Prefer not to set it, or set it to at least 5:

BAD:

restricts zooming to 150%

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5" />
CORRECT:

no maximum-scale restriction

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Why is this important?

Users with low vision rely on browser zoom to increase text and content size to a readable level. When a page disables zooming, these users cannot access the content effectively.

Disabling zoom also breaks the experience on phones for users who have set a larger default text size in their operating system settings.

More info:

WCAG 1.4.4 Resize Text.

Rule info

Standard

WCAG AA SC 1.4.4

Regulations

EN 301 549 RGAA EAA AODA

User impact

Fix complexity

Affects

Was this article helpful?

Checkout the ExcellentWebCheck services

ExcellentWebCheck's goal is to improve the online user experience. The tools of ExcellentWebCheck help to detect and improve usability problems on your website.