WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Robert Fentress
Date: Jun 25, 2015 2:45PM


Thanks for the excellent discussion everyone. This has been very
informative.

I was aware of the device pixel/reference pixel distinction, but sometimes
I forget about its implications. I'm so used to triggering breakpoints by
changing the viewport window, that I didn't fully realize that zooming the
page while keeping the viewport the same is (almost) an inversion of the
same principle. It is definitively more complex than it seems at first,
especially with Jonathan's qualifications. I'm still trying to develop the
right intuitions about it.

On Thu, Jun 25, 2015 at 1:48 PM, Jonathan Avila < <EMAIL REMOVED> >
wrote:

> > However, those sites will fail for all users with devices that have a
> screen in between breakpoints...so they're just examples of broken sites,
> full stop. No?
>
> I don't think so. There is another scale factor going on that must be
> considered with zoom. In my tests on the desktop changing my browser
> window and using zoom both affect the width and trigger breakpoints,
> however, zoom scales the page contents while shrinking the window's width
> does not cause an increase in text size. So, while in theory devices with
> odd widths could have problems IMO is it not likely because they site would
> just drop down to the lower breakpoint and the font sizes would remain what
> they were set for that lower breakpoint. With zoom, the text sizes
> increase but the lower resolution breakpoint remains causing the issue.
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> <EMAIL REMOVED>
> Phone 703.637.8957
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Patrick H. Lauke
> Sent: Thursday, June 25, 2015 11:13 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Browser zooming sufficient for WCAG 1.4.4 (resize
> text)
>
> However, those sites will fail for all users with devices that have a
> screen in between breakpoints...so they're just examples of broken sites,
> full stop. No?
>
> P
> --
> Patrick H. Lauke
>
>
> > On 25 Jun 2015, at 15:10, Jonathan Avila < <EMAIL REMOVED> >
> wrote:
> >
> > 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
> >
> > --
> > Jonathan Avila
> > Chief Accessibility Officer
> > SSB BART Group
> > <EMAIL REMOVED>
> > 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/
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > > > at http://webaim.org/discussion/archives
> > > > > >



--
Robert Fentress
Senior Accessibility Solutions Designer
540.231.1255

Technology-enhanced Learning & Online Strategies
Assistive Technologies
1180 Torgersen Hall
620 Drillfield Drive (0434)
Blacksburg, Virginia 24061