Ensure users can zoom when viewing content
Applicable Role(s): Developer
Overview
Some users need to increase the font size or zoom in on content in order to access content. If zooming is disabled, the text could be harder to see, or require additional assistive technology like magnifiers to access the content. Some pages may also not support responsive design out of the box, and may need zoom to even use content on mobile.
Best Practices
- Web content must be scalable to at least 200% zoom, and still be readable.
- Make sure there is no limit on scaling through the use of metadata attributes.
Pattern Examples
Zoom in metatags
Inaccessible Pattern (avoid)
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" minimum-scale=1.0,
maximum-scale=1.0, user-scalable=no>
Setting a minimum maximum scale, along with a user-scalable="no" parameter prevents users from being able to "pinch and zoom" on mobile devices. This means users can't increase zoom in on images, especially if they are scaled down to match the device width.
Accessible Pattern
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
If the site is designed to be responsive, removing the scale and user-scalable attributes will allow a user to pinch and zoom.