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"
/>

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

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