Check your design with text size increased to 200 percent

A basic accessibility guideline is that users should be able to increase text size when viewing your site without content disappearing or otherwise becoming unreadable. That’s pretty easy to understand.

What has not been clear is where to draw the line—how much do we need to increase text size when testing our designs? After all there will (almost) always be a point when the text is so large that the layout breaks in a bad way, making parts of it unreadable.

Fortunately WCAG 2.0 provides a more measurable guideline, 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. (Level AA)

With more and more browsers getting support for full page zoom functionality, some argue that you no longer need to consider what happens when only text size is increased. WCAG 2.0 does state that “The scaling of content is primarily a user agent responsibility”. However, I don’t think you can rely on zoom support being available and used by enough people to forget about text only resizing just yet.

From Understanding Success Criterion 1.4.4:

The author cannot rely on the user agent to satisfy this Success Criterion for HTML content if users do not have access to a user agent with zoom support. For example, if they work in a environment that requires them to use IE 6 or Firefox.

My interpretation of that is that until the vast majority of people use browsers that have zoom support (and browsers’ zoom support has matured), you should make sure that text can be scaled to 200 %.

I don’t think that is too much of a burden—200 % is less than you may think. This flexibility benefits people who often increase text size but do not want to scale the entire page (I’m one). It also benefits people who have changed the default text size setting in their browser and many who have specified a minimum font size. As a bonus, making your design flexible enough to handle text enlarged to 200 % means that it will also be better at handling varying amounts of content.

A good tool to use when checking your site with larger text is the Firefox add-on NoSquint, which can be configured to show the current text zoom level in the status bar.

Of course you will need to compromise sometimes—some designs are harder than others to make flexible enough for 200 %. The most important thing is that you check what happens when you increase text size and do what you can to allow for 200 %.

Way too many sites out there quickly become more or less unusable when text size is increased to much less than that. Make sure the sites you build don’t.

Posted on March 2, 2009 in Accessibility