Browser zoom great for accessibility

This post was motivated by Denis Boudreau's Why Browser Zoom Testing Sucks for Accessibility, even though I disagree with the conclusion, it makes some good and important points and it will help set the context for this post.

It's one of several posts recently talking about 'text sizing' (where only the text of the page changes size) is necessary, as well as (or instead of) 'zoom' where all content is scaled up.

I consider text-only sizing a non-issue for new projects for three main reasons:

  1. All desktop browsers default to zoom, and regular people generally use the defaults.
  2. When you are making or testing a responsive design site, zoom works better than text sizing, a lot better. The media queries trigger as though you were using a smaller screen, and everything re-arranges to fit the 'smaller' screen size.
  3. Allowing for either text-sizing or responsive is complex enough, doing both maybe impossible for any but the simplest sites. Given that responsive sites are better for zoom, lets focus on making responsive techniques accessible to all.

Defaulting to zoom

IE has had zoom in the visible browser chrome since version 7, and a decent zoom feature since version 8. Opera and Chrome have always defaulted to zoom, and I'm not sure when Safari switched to zoom by default but it was some time ago.

As a user you actually have to know:

  1. that there is another option,
  2. what difference it makes, and
  3. how to enable it.

Some people I've tested with weren't sure there was a way to 'make things bigger' at all, most knew the default (e.g. "I press cntl and plus"), and those that new about the text sizing option sometimes used it, sometime not.

Mobile browsers have different criteria, they already do 'zoom' for non responsive sites, a few do allow for increased text size, but it doesn't tend to work very well.

Responsive sites

For me this was the missing factor in Denis' post, as zoom works differently for responsive sites. Frankly, I would agree that zoom (testing) sucks if this weren't the case, but 90% of the sites we're working on these days are responsive or will be responsive in the next iteration.

I generally take a two step approach for testing WCAG2 1.4.4:

  1. Resize the window to around 1024px wide, something on the low end of current desktop/laptop resolutions.

    Zoom into 200% (which is 5 times cntl + in most browsers).

    If the page is responsive and it re-flows well, pass. If not, move onto step 2.

  2. Try text zoom, and see how much breaks.

    If you loose content or functionality, fail.

It's a bit of a new way / old way, switch. The funny thing is, the type of sites that haven't gone responsive are unlikely to do things that work with text sizing either. If they care about robust front-end code, they are probably going to put that effort into a responsive design, not fiddling around with container units.

It is probably a bit harsh to say the horizontal scrolling is a fail at 200% zoom, but if you factored that in, I think it would solve Denis' issue?

Here's a quick example with the Boston Globe with text sizing on the left vs zoom on the right, both at 200%:

Screenshots of Boston Globe, the left side uses text sizing with large areas of overlapping text, the right side uses zoom and has reflowed to one column.

I think you'll be hard pressed to find any moderately complex site (e.g. with multiple content columns) that works well with text zoom. None of the sufficient techniques for SC 1.4.4 would prevent overlapping text on a complex site unless you use media queries. When you make things bigger, something has to give.

Inflection point

I agree with Denis' points about how important it is, but allowing for text-only sizing isn't the only, or even best way to do it.

I think we’re at an inflection point, as responsive designs become the norm, the zoom approach works very well for those sites as it re-flows the content properly, in a way the developer intended and tested for anyway (because they test on mobiles). Zoom is also the method that regular people use by default, so we're making the default method work properly.

If we (as accessibility advocates) insist on text sizing, that’s adding a heap of extra variables to test, and it won’t happen. Let’s slip-stream the responsive bandwagon and make sure that responsive techniques are accessible.

Update

Denis and I have continued the conversation on twitter, I acknowledged that not all (or even that many) sites are responsive (yet), and Denis acknowledged that if zoom and responsive design proves robust it is a viable alternative.

What we really need is examples, do you know any good responsive sites? Or sites that work particularly well for expanding text? Please post below and we'll check them out.