WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Any official clarification on Text-only zoom and RWD?

for

From: Guy Hickling
Date: Feb 25, 2016 8:21AM

Alastair,

My apologies, I didn't explain myself well at all, did I? It's what
comes of speaking from memory instead of checking first! The critical
bit to have in em units are the media query breakpoints.

However, the proof of the pudding, as they say, is that, on the site I
gave the reference for, you can do text-only zoom up to 300% with
nothing going astray, nothing breaking out of their containers and
overwriting other stuff in the adjacent containers (the usual and
ugliest looking problem on so many sites when the user zooms). That is
achieved by em units in the media query breakpoints (but other things
need to be resizable as well, whether in percentage or em units, they
musn't be in fixed px units if they contain text).

> So your layout (with text-only sizing) fulfils what Jon was asking for, but that isn't the same thing as an EM layout.

As you say it provides what I hope Jon wanted, and also "an accessible
experience for users who increase just their text size".

In the post I wrote: "Instead of using pixels in our media query
breakpoints, simply use em units. Suppose we have a query like:
@media all and (max-width: 30em) {...}
to achieve some change when the screen size is equal to or smaller
than 30 em. It will work equally well whatever the text size in the
user's browser, large or small, because the query is now taking
account of the text size. That is to say, the changeover will occur
when elements are in the same position, relative to each other,
regardless of text size."

> What others (e.g. Jonathan) are saying is that text-sizing *without*
affecting layout or triggering a media query is needed.

Triggering the media queries will happen, that is necessary due to the
large font size. As the font size zooms, clearly it can fit less text
on the screen, so we actually want the queries to trigger in order to
keep the layout sane. But with em units in the media queries it means
that the layouts are exactly those the responsive developer has made
for tablet and phone; which is what keeps everything sane and neatly
laid out what ever the text zoom. It just means that the tablet
layout, for instance, triggers much earlier in large text zoom, due to
the larger text size, than it would for the much smaller text size of
zero zoom.

In fact, if the layout is done with a little bit of care, it is
possible to take an average size all the way up to 400% text zoom,
without the layout being hit too badly. That's better than the WCAG
asks for!

I agree the user has to choose the right browser, such as Firefox. I
do wonder how all the people who need it actually don't know some
browsers are better for them, and how long it takes them to find these
things out, but that's another story. (And I'm sure IE allowed
text-only zoom from its main menu upto about IE10. They've degraded it
in v11).

Regards,
Guy Hickling