Techniques for WCAG 2.0

On this page:

-

# G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not resize

## Applicability

All technologies that reflow text when windows are resized.

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)

## Description

Some user agents support changing the size of text without changing other dimensions of the text container. Loss of content or functionality can occur when the text overflows the space that was allocated for it. However, the layout properties may provide a way to continue to display the content effectively. The block sizes may be defined wide enough that the text does not overflow when resized by 200%. Text may wrap when it no longer fits within the block, and the block may be tall enough that all the text continues to fit in the block. The block may provide scrollbars when the resized text no longer fits.

## Examples

### Example 1: A multi-column page layout

HTML and CSS are used to create a two-column layout for a page of text. Using the default value of the `white-space` property, `normal`, causes text to wrap. So as the size of the text is increased to 200%, the text reflows and the column of text grows longer. If the column is too long for the viewport, the user agent provides scrollbars so the user can scroll text into view because the author has specified the CSS rule `overflow:scroll` or `overflow:auto`.

### Example 2

A newspaper layout with blocks of text in columns. The blocks have a fixed width, but no height set. When the text is resized in the browser, the text wraps and makes the blocks taller.

### Example 3: Relative text and container sizes using percent and em units

Using relative units on both the text and the container allows the container to grow to accomdate the text, without any truncation. This image shows the text using "normal" font size in Internet Explorer. The gray box is the div container.

This image shows the same text and container using the "largest" font size in Internet Explorer. The gray container has grown to hold the larger text.

Example Code:

    <style type="text/css">
      div { background-color:#ccc; line-height:120%; position:relative; }
      div.RelativeRelative { font-size:100%; width:8.1em; height:6.7em; }
    </style>

    <div class="RelativeRelative">
      Now is the time for all good men to come to the aid of their country.
    </div>

## Related Techniques

- G146: Using liquid layout
- C28: Specifying the size of text containers using em units
- SCR34: Calculating size and position in a way that scales with text size

## Tests

### Procedure

1. Increase text size to 200%.

2. Check whether all content and functionality is available.

### Expected Results

- Check #2 is true.

- Top
- Contents
- Intro
- Previous: Technique G178
- Next: Technique G180