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:
prevents users from zooming
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
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:
restricts zooming to 150%
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5" />
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:
Rule info
Standard
User impact
Moderate impact Causes difficulty for users with disabilities but does not block access. Fix when possible. Critical : blocks access entirely Serious : significantly hinders use Moderate : causes difficulty Minor : minimal disruptionFix complexity
High level of required technical expertise To resolve this issue, you need technical expertise in software engineering. Resolving this issue requires modifying the software code, for which you need a background in software engineering.Affects
Free Website Accessibility Audit