Techniques for WCAG 2.0

On this page:

-

# F88: Failure of SC 1.4.8 due to using text that is justified (aligned to both the left and the right margins)

## Applicability

All technologies.

This failure 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

Many people with cognitive disabilities have a great deal of trouble with blocks of text that are justified (aligned to both the left and the right margins). The spaces between words create "rivers of white" running down the page, which can make the text difficult for some people to read. This failure describes situations where this confusing text layout occurs. The best way to avoid this problem is not to create text layout that is fully justified (aligned to both the left and the right margins).

## Examples

### Failure Example 1

In the following example of a failure, the HTML `align` attribute is used to create justified text.

Example Code:

    <p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
    nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
    ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
    Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
    justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.
    </p>

### Failure Example 2

In this example of a failure, the CSS `text-align` property is used to create justified text.

Example Code:

    ...
    p {text-align: justify}

    ...

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum sit amet pede. Phasellus
    nec sem id mauris vehicula tincidunt. Morbi ac arcu. Maecenas vehicula velit et orci. Donec
    ullamcorper porttitor velit. Sed arcu lorem, cursus sit amet, auctor eu, convallis ut, purus.
    Vivamus imperdiet accumsan nunc. Maecenas pellentesque nunc a libero. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pharetra commodo
    justo. Nulla facilisi. Phasellus nulla lacus, tempor quis, tincidunt ac, rutrum et, mauris.</p>

## Related Techniques

- C22: Using CSS to control visual presentation of text

## Tests

### Procedure

1. Open the page in a common browser.

2. Verify that content is not justified (aligned to both the left and the right margins).

### Expected Results

- If test procedure #2 is false, then this failure condition applies and the content fails to meet Success Criterion 1.4.8.

- Top
- Contents
- Intro
- Previous: Failure F87
- Next: Failure F89