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 should 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

<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.