Monday, March 09, 2009

Check your design with text size increased to 200 percent

Good rule for text size ...

"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."    (Continued via 456 Berea Street)    [Usability Resources]


Post a Comment

<< Home

<< Home