WebAIM - Web Accessibility In Mind

E-mail List Archives

Browser zooming sufficient for WCAG 1.4.4 (resize text)

for

From: Alastair Campbell
Date: Jun 25, 2015 3:36AM

There seem to be quite a few myths & misunderstanding around zoom and
responsive design, I think it's worth being clear how it works and it is
something I've written about it quite a bit.

Robert asked:
"What is unclear is whether the, now ubiquitous, browser page zoom
functionality means that units like px are acceptable"


and Terri commented:
"fonts defined in px will NOT scale with the size the screen"

I can practically hear Joe Clark whispering in my ear: "Pixel is a relative
unit." and it is more true than ever. You need to understand the different
between ‘device pixels' and ‘CSS pixels', for which I strongly recommend
PPK's two-part article on the subject [1]. but the short version is:

- A device (computer, mobile phone etc) will have physical ‘device pixels'
that make up the screen, but they vary a great deal in density.
- Each browser has a set size for ‘CSS pixels' that should be the same size
across devices to your vision, with an assumed viewing distance. In fact,
there is an equation for the size of a CSS pixel so you can work out what
the intended viewing distance is [2].

That is why high-resolution devices like the flagship phones (with more
pixels than an 55" HD TV) can show websites in a readable fashion on a 5"
display. A CSS pixel is often 3 times bigger than the device pixel.

So although text defined in PX will not vary on *one* screen (without
zoom), they will vary across devices, in an appropriate way.

Michelangelo wrote:
"In usability testing I observed users with limited vision who still
enlarge the font without zooming the page, in hopes of minimizing
horizontal scrolling, which is so disorienting."


I've seen this too, and I entirely agree that horizontal scrolling is a big
issue (and I think it should be a fail at WCAG2-AA). However, text-sizing
is not the long term solution, and we are currently in a transition period.

As desktop browsers now default to zoom, and the most popular mobile
browsers *only* have zoom, and responsive techniques allow developers to
cope with zoom effectively, I cannot see any reason for browsers to
continue providing text-sizing. (Other than historical inertia.)

Most new sites are being developed with responsive techniques (although
there are many that haven't changed layout in many years), and Google is
favouring mobile-friendly sites in the search rankings. This is the way
things are going.

The thing to push for is well-done responsive designs. There are some
issues (e.g. images getting blurry when zoomed) but with the recent support
for responsive-images even that has potential solutions.

Whitney wrote:
"It looks like they switch to a mobile template when the zoom level
gets high, so the text (and page overall) wrap well."


Yes, that is what happens when you use responsive design, as Patrick
mentioned, the effective width of the browser reduces, so it triggers the
media queries. You can think of it as the ‘mobile template', but it is
really the ‘template' for a certain width.

When you zoom, *something* has to give, and media-queries allow developers
to adapt the layout to different sized browser viewports.

Robert asked:
"So, would it be fair to say that if you created a responsive design
with px units carefully with appropriate breakpoints, it
would be okay?"

Yes [3]. The approach we tend to take is to design the mobile view first,
and as the space (window size) expands adapt the layout to show more. The
breakpoints should be based on the design, rather than particular device
sizes.

1] http://www.quirksmode.org/mobile/viewports.html
2] https://alastairc.ac/2013/02/how-to-hold-your-ipad/
3] https://alastairc.ac/2013/08/browser-zoom-great-for-accessibility/