Accessible websites at 400% browser zoom

Reflow

I recently became aware of two WCAG Guidelines that sound similar, but are fundamentally different (and, to different degrees, challenging to achieve).

The first of these is the “Reflow” requirement, namely that “content can be enlarged without increasing line length.”

You might be wondering, as I did, what does that even mean?

Perhaps the following criteria might help (or not):

• Vertical scrolling content at a width equivalent to 320 CSS pixels
• Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Okay, well, what does that mean? Again, ever helpful, WCAG allows

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom

Long and short seems to be that if you zoom your browser to 400%, text should “reflow”, that is, not require scrolling in more than one dimension, and not break in ways that reduce (or remove) legibility.

The “Understanding” page for this criterion is helpful. E.g. “Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.”

How to comply

It turns out that in many cases, if the website is built to be responsive at 100% zoom, it will also be responsive at 400% zoom. Increasing zoom kind of behaves as if your screen gets progressively smaller, and responsive breakpoints, being breakpoints, kick in and “automatically” reflow the content. Avoid fixed-width elements, and overly complex, overlapping arrangements and you’re probably fine.

But that alone won’t help with 2x font-size increases. Read more about that in a future post.