WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Browser zooming sufficient for WCAG 1.4.4 (resize text)


From: Jonathan Avila
Date: Jun 25, 2015 7:10AM

You don't have to look too far to find responsive sites that fail browser zoom via SC 1.4.4. In my experience simply because a site is responsive with break points doesn't mean that when browser zoomed is applied text won't be truncated. For example absolute and fixed positioned content can be very problematic. Also, pages that snap when you scroll are famous for vertically truncating the text in between break points preventing the user from scrolling to it. So while things may work at a given breakpoint I have concerns with text being truncated at zoom levels that lie between breakpoints. An easy example is a container with a max-height and overflow hidden that is set appropriate at each breakpoint but when zoom is applied between breakpoints, the text is truncated.


Jonathan Avila 
Chief Accessibility Officer
Phone 703.637.8957  
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Alastair Campbell
Sent: Thursday, June 25, 2015 5:36 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Browser zooming sufficient for WCAG 1.4.4 (resize text)

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/