Do I need to use EM sizing for the layout to meet the WCAG 2.0 criteria?

Question

According to the WCAG 2.0, EM units should be used as font-size, to meet the WCAG 2.0 minimum criteria:

http://www.w3.org/WAI/WCAG20/quickref/Overview.php

But I could not find anything about about using EM's for the layout. Can someone tell me if its sufficient to use EM's only for the font-sizes?

Answer 1

According to http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/C28 you need to use em's for layout as well (for text-content) to satisfy the "sufficient" criterion.

Answer 2

I tend to use EMs for text sizing, but % to specify container widths for layout purposes, as shown in the example here: http://www.w3.org/TR/WCAG20-TECHS/G146

Answer 3

Short answer: not necessarily, other ways to comply with WCAG 2.0 success criteria 1.4.4 are possible.

Long answer:

The document you link (How to Meet WCAG 2.0) reads itself, about the techniques:

Note that all techniques are informative - you don't have to follow them. The "sufficient techniques" listed below are considered sufficient to meet the success criteria; however, it is not necessary to use these particular techniques.

That is, if you come up with another way to meet a criterion, it is ok, as long as you really meet that criterion.

Going specifically to the technique you comment, the techniques for the success criterion 1.4.4. establish that

Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques.

Strictly following that text, you can follow one or more of those techniques to comply with the criterion. One of these techniques is C28: Specifying the size of text containers using em units This works because, as the container size is, say, "100 characters wide", if the character size doubles, the container size doubles as well (as it is always relative to the font em size) However, this brings the undesirable effect that the container size often grows beyond the viewport, introducing "ugly" horizontal scrollbars.

So, are there other ways to comply with it? Yes, there are. You can use e.g. G146: Using liquid layout, which implies judiciously combining percentages and ems (both being relative units), and accounting for a logical order of the contents.

I am particularly fond of:

• Combining fluid and liquid designs, so that container size increases until it more or less fills the viewport.
• Manually check that the success criterion is met, that is, check that

"text can be resized without assistive technology up to 200 percent without loss of content or functionality." (that's what the criterion reads). I personally add some margin, to account for different platform behaviors. You can easily increase the font size with your browser menus (beware, font size is not the same as page zoom), or with user style sheets.