Mobile accessibility tip: don’t suppress pinch zoom

Update: this is not an issue as of iOS6.

A key feature of mobile browsing is being able to zoom in to read content and out to locate content within a page. It’s an invaluable tool however I keep stumbling across sites that suppress zoom and with it one of the main things that make mobile browsing viable for everybody.

Zoom can be repressed by doing the following:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;” name=”viewport”>

and

<meta name=”viewport” content=”user-scalable=no” />

It’s the initial-scale=1.0 and maximum-scale=1.0 which effectively disables zoom in the first example and content=”user-scalable=no” in the second. On mobile you want to give the user as much control over screen size as you can so instead do something like this:

<meta content=”width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;” name=”viewport”>

and

<meta name=”viewport” content=”user-scalable=YES” />

Done this way everyone gets to read your content.

iOS Bug (updated 30 July, 2012)

As you will see from the comments below there is an iOS bug that prevents elegant scaling when in landscape mode. Details can be found in an iOS bug report and test page. Here are also a couple of articles that go into more detail about it:

18 thoughts on “Mobile accessibility tip: don’t suppress pinch zoom

  1. Hi Henny,
    I tried these statements on a small site I am currently putting together which uses media queries to reflow elements (hide background images usw) on a smaller screen. So far I have just used “meta name=’viewport’ content=’width=device-width’” which constrains the display to the viewport and reflows the document (even though though it does not seem to trigger the breakpoint when viewing in landscape orientation on my Android phone) but does not allow to pinch for zooming in.
    Using your statements, the display becomes pinchable (which is good) but it appears that it no longer reflows to constrain the page to viewport dimensions – it shows the same layout as in desktop browsers. Is there a way to achieve reflow and still enable zoom in with pinch?

    Regards,
    Detlev

  2. Another current and helpful article, Henny. Keep them coming!

    The problem is that disabling useful features makes the site harder to use. So people leave it and buy or read some other website which avoids that mistakes. It takes just a few seconds to lose a customer by disabling the ability to zoom in and panning around the normal layout – the site becomes impossible to use for over most people over 40, for example.

    Disabling device features like this is surely breaking the spirit of WCAG guidelines, if not the letter? Those essential principles are all about increasing adaptability of content and design. (In addition to the more far-reaching usability problems.)

    It’s an intensely frustrating throwback to over-zealous Flash-only sites; a symptom of not thinking things through and forgetting the user-focused approach.

    The solution is simple: when making a website, don’t break UA features. Just leave them alone and let them do their thing! Let the user decide how they want to view your website – exactly as Henny describes.

    (Henny, does your blog allow boxing out the code samples? It all runs together a bit at the moment.)

    Henny Reply:

    “…the site becomes impossible to use for over most people over 40″
    Actually Ben I disagree. I think not allowing zoom can make the site difficult for anyone to use, especially if content does not reflow.

    “…when making a website, don’t break UA features.”
    Absolutely. Content should work with, and not break, the operation of platform/browser specific features or built in assistive technology. The devil however is in the detail what with there being so many mobile platforms and browsers out there.

    Re code samples this is something I need to look into.

  3. Hi Ben,
    I’m not sure whether your comment (obliquely?) refers to the question I was asking. As I see it, there is just a trade-off between offering an optimised view for the small screen (via media queries) which means the font has good size by default and pinching and panning are unnecessary, and a view that preserves the layout and candy of the desktop site but needs lots of interaction (double-tapping, swiping etc) to be read / used. Which way you should go will depend on the site and its intended uses.
    Regards,
    Detlev

    Henny Reply:

    Detlev, thanks for the links you’ve sent over about this via email. There may well be a playoff and this is something I’m going to think about and see if there is a cut off for. Will post updated thoughts when I’ve worked it through a bit! Thanks for the input.

  4. Pingback: Some links for light reading (25/5/12) | Max Design

  5. I heard from one guy has low vision that he is using desktop site on his iPhone because the mobile site blocks zoom feature. Some people claim that the font size of mobile site is enough but it’s not for people has low vision.

  6. You have to use commas between properties in your content attribute, and not semicolons.

  7. If you disable a feature of my device without my consent would you not be in violation of California penal code 502(a) subsection C part 5?

    “(5) Knowingly and without permission disrupts or causes the disruption of computer services or denies or causes the denial of computer services to an authorized user of a computer, computer system, or computer network.”

  8. Thanks John, I didn’t know about that aspect of the California Penal code. Have you seen it applied to websites anywhere successfully?

  9. Hi Henry,
    I just stumbled upon your blog whilst searching for a fix for that annoying zoom repression problem. I was trying to mobilise my blog. Thanks for the great tip. You have been bookmarked. I agree, mobile sites should not have zoom disabled by default. I have 20 / 20 vision and still found the fonts size on my mobile site a little tiny to read comfortably. I believe its up to the reader to decide if they want to zoom out or not. Once more, thanks for this great tip and do have a nice day.

  10. Disabling user-scalable (namely, the ability to double tap to zoom) allows the browser to reduce the click delay. In touch-enable browsers, when the user expects the double tap to zoom, the browser generally waits 300ms before firing the click event, waiting to see if the user will double tap. Disabling user-scalable allows for the Chrome browser to fire the click event immediately, allowing for a better user experience.

    From Google IO 2013 session https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

  11. I think it would be crazy to disable zooming. I am trying to figure out how I can have it automatically zoomed in for mobile devices only? Does anyone know if that is possible, and how to do it? I have a website that is very long and nothing to the sides at all. So I would love to find a way to zoom in from the start. That would be amazing. I would be very appreciative if someone could point me in the right direction?

  12. Wonderful goods from you, man. I’ve take into account your stuff prior to and you’re simply
    extremely magnificent. I actually like what you have obtained right here, certainly
    like what you are saying and the best way in which you are saying it.

    You make it entertaining and you continue to care for to
    keep it sensible. I cant wait to learn much more from you.
    This is really a wonderful site.

  13. So useful!

    I had a client wanted pinch zoom enabled which I was struggling with and when I sort advice I came across some developers who said it wasn’t necessary on responsive, so not only did you give me the solution but also the reason for doing it!

    Thanks Henry!

  14. Hi Abbie, I’m so glad it helped. It’s a hard one to get get people to do (and I can understand why) but I have seen so many users struggle in user testing when they haven’t been able to do this. This applies across the board too; many people without access needs rely on it.

    Glad it worked out for you.

    Henny

Comments are closed.