Techniques for WCAG 2.0

On this page:

-

# C24: Using percentage values in CSS for container sizes

## Applicability

Pages that use CSS.

This technique relates to:

- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

## Description

The objective of this technique is to make it possible for users who need to increase the size of text in order to read it will not have to scroll horizontally in order to read a line of text. To use this technique, an author specifies the width of text containers using percent values.

## Examples

### Example 1

A newspaper has content in the middle of the window. The width of the container for the content is specified in page percentages, so that when a person with low vision increases the font size the text reflows inside the browser window at the new size and there is no need to scroll horizontally.

## Related Techniques

- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

## Tests

### Procedure

1. Check that all container widths are specified as percentage values.

2. Increase the text size to 200%.

3. Check to make sure that horizontal scrolling is not required to read any line of text.

4. Check that all text is still visible on the page.

### Expected Results

- Checks #1, #3, and #4 are true.

- Top
- Contents
- Intro
- Previous: Technique C23
- Next: Technique C25