RE: Enabling Zoom on Mobile Devices

>From reading this thread I think we need to be clear about the differences between zoom on desktop and mobile as some people are assuming they work the same way.

James Nurthen mentioned that:
“iOS supports Dynamic Type where you can set your fonts to be various -apple-system-xxx fonts CSS”

I’m fairly sure that doesn’t work for web content in Safari, and very few devices have an OS level ‘text zoom’ that affects web content.

I think it’s worth explaining how desktop and mobile differ for zoom, it is something I’ve been watching and experimenting with for a while [1].

Also, I’ll try and explain this in a way that makes sense to people who can’t see, let me know if I’m not successful:

Desktop/laptops:
For a traditional non-responsive site, browser-zoom basically works by expanding everything. At 200% zoom 1 pixel becomes 2x2 pixels. I.e. twice as wide and twice as tall.
Generally this causes horizontal scrolling, because the layout of the site expands beyond your view of it (the browser window). You can imagine it a bit like a traditional screen magnifier.
This is very difficult for people who need to make things bigger (and perhaps also use a screen magnifier so you have double-scrolling).  I’d like to see that become a fail at WCAG double-A.

For a responsive site zooming in still increases everything, the difference is that you can use media queries to adapt the layout. If your browser window is 1000 pixels wide on screen and you zoom in to 200%, your effective browser width is 500 pixels.
The site designer can then have a media query that adapts the layout to 500 pixels wide, for example, by making columns stack on top of each other instead of being side by side.

Therefore someone zooming in does not get horizontal scrolling, and everything is bigger.

At sufficient levels of zoom, the site appears to be the same as it would on a mobile device. I think this is a good thing for accessibility [1].

NB: Some desktop browsers support text-sizing, but it is not the default option, and doesn’t work as well with responsive sites. I’m not going to cover that here.

Mobile devices:
For non-responsive sites mobiles tend to start ‘zoomed out’ so you see the whole layout, which is squeezed into roughly 1000 pixels wide. You can then pinch-zoom and it works like a screen magnifier, you have to scroll around.

For a responsive site the browser has a certain width (e.g. 320px wide for an iPhone 5), and the applicable media query is used for the layout.
If the site allows pinch-zoom (as per Jonathan Avila’s email) then you immediately get horizontal scrolling, it works like a screen magnifier.

I think this is a user-agent issue, and the best method would be to have an accessibility option that lets you zoom in more with a responsive-style increase in size, rather than a magnifier approach.

I agree with Jonathan that the iOS zoom is an assistive technology and therefore doesn’t count for 1.4.4.

Currently there is not a good, mobile browser / OS based zoom that works on responsive sites and this is a big issue as people use mobile devices more.

I hope that helps, I’m not saying I have the answers, but I’ve got the responsive & zoom aspects fairly straight in my head!

Cheers,

-Alastair

1] https://alastairc.ac/2013/08/browser-zoom-great-for-accessibility/