WCAG 2.1 Reflow vs Resize Text

Question

The WCAG 1.4.10 Reflow asks to support width 320 CSS pixels without horizontal scrolling. The requirement is written in such a way that an author can test for reflow on a desktop browser with typical 1280x1024 pixel dimensions by zooming the content to 400%. If the content expands without requiring scrolling in both dimensions, this is mathematically the same as reducing the window to 320x256 pixels.

The WCAG 1.4.4 Resize Text asks that Text can be resized without assistive technology up to 200% without loss of content or functionality.

Does the 200% Text resize requirement multiply with the 320CSS pixels requirement? In other words, if I set the default font size in Chrome to 200%, do I still need to support the reflow to 320px width aka 400% zoom?

Answer 1

With the way this is worded we often see confusion on this point and I have had many an argument over this.

What seems to be the general consensus and the model we work to is that these two points should be handled separately in terms of testing, but you can utilise responsive design to achieve both.

So assuming that if I set my zoom to 400% the font will increase a MINIMUM of 200% (taking into account media query changes) and reach a size larger than the minimum required size of 32px. (the minimum for 200% size) equivalent on the mobile view then this is a pass. I have yet to see a site that can be zoomed to 400% where the font size doesn't meet this requirement (as otherwise the font size would have to be 8px equivalent on mobile).

With the above being said that is how you 'pass' WCAG requirements, but we can do a lot better and I always insist on the following requirements on projects we complete:-

1. Font sizes should be in em and rem units so they can be scaled by the users settings.
2. Any design should be able to accommodate 32px (equivalent) font size without zooming and no text clipping. So all containers should expand to fit etc.
3. The only exception is menus where we have a minimum requirement on 24px (150% font size) due to the fact these often take up too much space when they are fixed headers spanning multiple lines. This is technically a fail but browser zooming can overcome this limitation.
4. All websites should work with the browser font size set to 'very large' and scale the font appropriately (as if you set the base font size as px or vw browser settings are ignored).
5. (optional but we added it to our spec last year) - an 'accessibility settings' page should be included that allows a user to change the font size on the site to 200%.

The advantage of point 5 is that you can then control more complex layouts. For example if you have a three column grid then setting the font size to 200% in the browser will make it unusable. However if you have a settings screen where the font size can be changed to 200% you can apply styling to change those three columns into two columns so the content fits.