WCAG Success Criterion 1.4.4 Resize text states:
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
The reason for this is pretty obvious: people with low vision may need to resize text so they can read it. There are two ways to do that in the browser (not counting tools like screen magnifiers, which is what is meant by "without assistive technology"): zoom, and font size setting.
Zoom versus font size
Browser zoom can either be done on a page-by-page basis, using the Ctrl + + key combination; or can be changed in the browser settings so every page is displayed at the user's chosen zoom level. Font size is set in the browser settings.
Zoom and font size settings have different effects on page layout. Zoom kicks any responsive styles into action, so layout shifts as it would on smaller screen sizes. If you've created all your responsive layouts and styles like a good front end developer, increasing zoom level should just work.
However, increasing font size has a different type of effect. The larger fonts make everything shift around unpredictably, causing your nicely-crafted site layout to break in potentially strange and unusable ways.
Important note on never setting font sizes in pixels
These unpredictable layout shifts are one reason developers often set font sizes in pixels, rather than relative units such as em or rem. (This is one of the most common issues I see when doing accessibility audits). DO NOT DO THIS. This is a failure of the WCAG success criterion that users be able to resize text up to 200%. Yes they can do this with zoom even if font size is set in pixels, but they cannot by changing the browser font size setting. We must accommodate whichever way users choose to resize text.
How to accommodate user font size settings
I don't know about you, but up until recently I never tested my sites by changing the browser font size, and I suspect I'm not alone. However, to be properly accessible we must be sure users can increase the browser font size up to 200% of our base font size (according to the WCAG success criterion), and the site must remain usable.
While doing an accessibility audit recently I happened to visit my own site after I'd changed the browser font size, and it wasn't pretty:
My nice funky slanted line between the homepage sections was janky and out of place, and the menu wrapped in a really ugly way, pushing the logo and search form button up and almost obscuring the theme switcher.
So I set about trying to fix this.
Detecting browser-set font size
You might think there would be some kind of CSS selector, like a media query, that would enable us to detect the current browser font size. Nope. It has to be done with JavaScript. MDN describes how, using window.getComputedStyle.
This is the function I wrote, based on the MDN example, to get the computed font size and add a class to the body if the font size is 25px or larger:
function getComputedFontSize() {
const para = document.querySelector('p');
const compStyles = window.getComputedStyle(para);
const fontSize = compStyles.getPropertyValue('font-size');
const fontNum = parseInt(fontSize.split('px')[0]);
if(fontNum >= 25) {
document.body.classList.add('font-large');
}
};
getComputedFontSize();This script looks for the first paragraph element on the page (it won't work unless there is at least one), gets its computed font size (i.e. its actual size, with any browser resizing applied), converts that to a number, checks if it's 25 or larger, and if so, adds the font-large class to the <body> tag.
(Note: I tried and failed to find an event listener that would check when browser font size is changed. There are apparently tricks to get around this, which I may implement in the future. For now, the function just runs on page load).
Fixing styles
From there, it's pretty simple: use the font-large class in your CSS to apply or remove styles when the user has increased font size. Here's how my home page looked after doing that:
There were a few issues fixed that you won't see in that screenshot, in the main menu dialog and search form.
Limit to font size fixes
The WCAG success criterion for resizing text only specifies that things have to work when fonts are increased up to 200%. For the math-challenged among us (including me), that is twice your base font sizes. It's possible in most browsers to increase the base font size up to 72 pixels. While it certainly would be a nice touch to accommodate that, as long as your site works at up to 200%, you pass the success criterion.