Techniques for WCAG 2.0

On this page:

-

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

## Applicability

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 purpose of this technique is to ensure that CSS is used in a way that allows users to view content in such a way that line length can average 80 characters or less. This makes it possible for users with certain reading or vision disabilities that have trouble keeping their place when reading long lines of text to view and interact with the content more efficiently. This technique also allows for column width to grow wider as font sizes increase, which will reduce the possibility of clipping as the text size increases..

Note that this technique does not require authors to use CSS to limit the width of lines of text to less than 80 characters in the default view. Rather, the recommendation to use relative measurements in CSS layouts helps to ensure that authors do not set column widths in such a way that makes it impossible for users to view content with line lengths of 80 characters or less.

## Examples

### Example 1

In this example the `div` width is set in ems in the stylesheet.

Note: The CSS property `max-width` is not supported in versions of Internet Explorer 6 and below.

Example Code:

    #main_content {max-width: 70em}

And the text block would be placed inside the `div` in the content

Example Code:

    <div id="main_content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
    </div>

### Example 2

In this example the `div` width is set in percent in the stylesheet

Example Code:

    #main_content {width: 90%}

And the text block would be placed inside the `div` in the content

Example Code:

    <div id="main_content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
    </div>

## Resources

Resources are for information purposes only, no endorsement implied.

- CSS 2 Box Model

- CSS 2 Visual formatting Model

- CSS 2 Visual formatting Model Details

- CssLayouts

- About fluid and fixed width layouts

- Accessible CSS

- Ideal line length for content

## Tests

### Procedure

1. Test to see that the columns are defined in relative units.

2. Check to see that line length can be set to 80 characters or less by resizing the browser window.

### Expected Results

- Checks #1 and #2 are true.

- Top
- Contents
- Intro
- Previous: Technique C19
- Next: Technique C21