DEV Community

Cover image for A11y tips: let the user control the zoom
Carlos Espada
Carlos Espada

Posted on

A11y tips: let the user control the zoom

When we define a <meta name="viewport"> there are two parameters that we can use that affect accessibility:

  • user-scalable="no": disables browser zoom on a web page
  • maximum-scale: limits the amount the user can zoom

Both are problematic for users with low vision who rely on browser zoom to see the contents of a web page. It is better not to define them and to leave complete freedom to the user to manage the zoom as needed when visiting our website.

Therefore the ideal definition is:

<meta
  name="viewport"
  content="width=device-width, initial-scale= 1"
/>
Enter fullscreen mode Exit fullscreen mode

Or even not define any <meta name="viewport">, like Google does. But please don't do like Instagram:

Capture of the HTML code of Instagram, in which the meta name viewport is highlighted with several parameters that disable the possibility of zooming

This is a perfect example of how not to use <meta name="viewport" />.

Discussion (0)