WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Avila
Date: Mar 2, 2016 11:46AM

Alastair, see my comments below marked up with our names. Jonathan

> The innerWidth will change AND the window.devicePixelRatio will also
> increase. This will cause the text size to increase even when a
> breakpoint has not been reached.

[Alastair]
Yes, so testing that on the inspector console, my browser starts with an innerWidth of 1280, and a devicePixelRatio of 2 (retina screen).
If I zoom in to 200% (cmd and + 6 times), the inner width is 640, and devicePixelRatio is 4 (2x200%).

However, be careful on the terminology, everything is increasing proportionally, not just the text. (I think that's what you meant, but it one of those things that is easy to mistake.)

[Jonathan]
Yes, I agree that everything is increasing with zoom -- but the SC 1.4.4 only requires resize of text and not resize of other elements. So that is why I focused on the word text -- not meaning to imply it was the only thing to increase.

> So browser zoom such as the zoom in Chrome causes both a scale change
> and inner width change that in my opinion could cause unexpected
> issues in between breakpoints.


[Alastair]
Not if it is actually RWD approach, which should use percentages for widths. To quote the original RWD article: "Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design."

[Jonathan]
Perhaps if it is only using percentages -- but I also worry about overflow hidden, etc. -- but perhaps that's not allowed under true RWD?

> That's why you'd need to test for zoom even when responsive design is
> used. You can see this by simply resizing your window and the
> innerWidth will change but the devicePixelRatio will not.
>

[Alastair]
I'm not going to argue against testing layouts, but I don't understand the pixel ratio bit.

If I screenshot my homepage with the browser at 427px wide:
https://alastairc.ac/tmp/homepage-small.png

It is exactly the same as a screenshot at 1280px wide zoomed in by 300%:
https://alastairc.ac/tmp/homepage-zoomed.png

[jda] I respectfully disagree, the text is larger in the zoomed view in your screen shots. That's because the text is scaling and the innerWidth property is changing and thus the content enlarges at a greater rate with zoom and that is my point -- that if something like an overflow hidden was present it might only rear it's head when zoom was used rather than simply resizing the window.

[Alastair]
Yes, the device pixel ratio is different due to zoom level, but the layout and proportions are the same. If you are testing by changing browser width, that is equivalent to testing with zoom.

[jda] See above -- there is a difference IMO because with zoom the text enlarges faster than with the change of just with width of the window inner width change.

Kind regards,

-Alastair