Techniques for WCAG 2.0

On this page:

-

# C28: Specifying the size of text containers using em units

## Applicability

CSS

This technique relates to:

- Success Criterion 1.4.4 (Resize text)
  - How to Meet 1.4.4 (Resize text)
  - Understanding Success Criterion 1.4.4 (Resize text)

## User Agent and Assistive Technology Support Notes

In Internet Explorer 6, Windows High Contrast Mode will resize percent-based fonts in nested tables to be too large. Firefox and later versions of IE do not resize fonts in High Contrast Mode, and don't have this issue.

## Description

The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in `em` units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.

The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.

The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.

## Examples

### Example 1: Em units for sizes for layout container containing text

In this example, a `div` element, with `id` value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with `id` value of "nav_list." The text size for the navigation links and the width of the container are specified in `em` units.

Example Code:

    #nav_menu { width: 20em; height: 100em }

    #nav_list { font-size: 100%; }

### Example 2: Em units for text-based form controls

In this example, `input` elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in `percent` units and width for these elements in `em` units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).

Example Code:

    input.form1 { font-size: 100%; width: 15em; }

### Example 3: Em units in dropdown boxes

In this example, `select` elements have been given the class name "pick." CSS rules are used to define the font size in `percent` units and width in `em` units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.

Example Code:

    input.pick { font-size: 100%; width: 10em; }

### Example 4: Em units for non-text-based form controls

In this example, `input` elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.

Example Code:

    input.choose { width: 1.2em; height: 1.2em; }

## Related Techniques

- C12: Using percent for font sizes
- C14: Using em units for font sizes
- C17: Scaling form elements which contain text
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

## Tests

### Procedure

- Identify containers that contain text or allow text input.

- Check the container's width and/or height are specified in `em` units.

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique C27
- Next: Technique C29