A standard part of accessibility testing is to check if a site conforms to WCAG 1.4.4 Resize Text:
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
"Without assistive technology" means that we should be able to use browser settings to resize text, without special accessibility tools. This criterion fails if either of these two conditions exists:
- Text cannot be resized by the browser
- Text can be resized, but content or functionality is lost.
What causes text to not resize? Briefly, text size which is set in pixels. All text size should be set in relative units such as rems, ems, or percentages to permit browser resizing.
Testing Resize Text
So how do we test this success criterion?
Change browser font size
One way is to change the default font size in our browser settings. To do this, make sure you find the setting that allows you to choose the exact font size. Chrome, for example, has a simpler setting that allows you to choose from a few preset font sizes, but we want to make sure we increase it to exactly 200%.
The default base font size in most (if not all) browsers is 16 pixels. Thus, you want to change the size to 32 pixels, as 32 is 200% of 16, and check if a) the site text resizes and b) no content or functionality is lost.
Firefox zoom text only setting
Recently I came across a post which mentioned that Firefox has a "Zoom text only" setting, and that to test Resize Text, you can activate this setting and select 200% as the default zoom level.
This seemed like a simpler method than setting a precise font size, so I tried it. But as it turns out, this setting also resizes text which is set in pixels, forcing it to 200% (or whatever zoom level you choose).
So can you use it to test 1.4.4 in an accessibility audit? Not really, because it won't show what text is set in pixels and thus won't resize when browser font size is changed. This is a browser-specific functionality which certainly may be very useful for people who need to resize text. But for accessibility testing it's a bit artificial, because it's limited to Firefox and limited to this specific setting. You can't tell what text resizes because it's set in relative units, and what text is being force-resized by the zoom setting.
What it could be useful for is if you're remediating a site with text sizes set in pixels, to get an idea of the kinds of issues you'll need to fix when you change to relative units. For example, this is a screenshot of the header of a website with text zoomed to 200% in Firefox. It falls completely apart, one reason being the header height is set in pixels:
