Techniques for WCAG 2.0

On this page:

-

# C22: Using CSS to control visual presentation of text

## Applicability

All technologies that support CSS.

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)
- Success Criterion 1.4.4 (Resize text)
  - How to Meet 1.4.4 (Resize text)
  - Understanding Success Criterion 1.4.4 (Resize text)
- Success Criterion 1.4.5 (Images of Text)
  - How to Meet 1.4.5 (Images of Text)
  - Understanding Success Criterion 1.4.5 (Images of Text)
- Success Criterion 1.4.9 (Images of Text (No Exception))
  - How to Meet 1.4.9 (Images of Text (No Exception))
  - Understanding Success Criterion 1.4.9 (Images of Text (No Exception))

## Description

The objective of this technique is to demonstrate how CSS can be used to control the visual presentation of text. This will allow users to modify, via the user agent, the visual characteristics of the text to meet their requirement. The text characteristics include aspects such as size, color, font family and relative placement.

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the markup in their content, making it more accessible at the same time.

Text within images has several accessibility problems, including the inability to:

- be scaled according to settings in the browser

- be displayed in colors specified by settings in the browser or rules in user-defined style sheets

- honor operating system settings, such as high contrast

It is better to use real text for the text portion of these elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation. For this to work effectively, choose fonts that are likely to be available on the user's system and define fallback fonts for users who may not have the first font that is specified. Newer machines and user agents often smooth or anti-alias all text, so it is likely that your headings and buttons will look nice on these systems without resorting to images of text.

The following CSS properties are useful to style text and avoid the need for text in images:

- The `font-family` property is used to display the code aspect in a monospace font family.

- The `text-align` property is used to display the text to the right of the viewport.

- The `font-size` property is used to display the text in a larger size.

- The `font-style` property is used to display text in italics.

- The `font-weight` property is used to set how thick or thin characters in text should be displayed.

- The `color` property is used to display the color of text or text containers.

- The `line-height` property is used to display the line height for a block of text.

- The `text-transform` property is used to control the case of letters in text.

- The `letter-spacing` property is used to control the spacing of letters in text.

- The `background-image` property can be used to display text on a non-text background.

- The `first-line` pseudo class can be used to modify the presentation of the first line in a block of text.

- The `:first-letter` pseudo class can be used to modify the presentation of the first letter in a block of text.

- The `:before` and `:after` pseudo classes can be used to insert decorative non-text content before or after blocks of text.

## Examples

### Example 1: Using CSS font-family to control the font family for text

The XHTML component:

Example Code:

    <p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>

The CSS component:

Example Code:

    code { font-family:"Courier New", Courier, monospace }

### Example 2: Using CSS text-align to control the placement (alignment) of text

The XHTML component:

Example Code:

    <p class="right">This text should be to the right of the viewport.</p>

The CSS component:

Example Code:

    .right { text-align: right; }

### Example 3: Using CSS font-size to control the size of text

The XHTML component:

Example Code:

    <p>09 <strong class="largersize">March</strong> 2008</p>

The CSS component:

Example Code:

    strong.largersize { font-size: 1.5em; }

### Example 4: Using CSS color to control the color of text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:

    <p>09 <em class="highlight">March</em> 2008</p>

The CSS component:

Example Code:

    .highlight{ color: red; }

### Example 5: Using CSS font-style to italicize text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:

    <p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
    Blog</a>.</p>

The CSS component:

Example Code:

    .featuredsite{ font-style:italic; }

### Example 6: Using CSS font-weight to control the font weight of the text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:

    <p>This deal is available <span class="highlight">now!</span></p>

The CSS component:

Example Code:

    .highlight { font-weight:bold; color:#990000; }

### Example 7: Using CSS text-transform to control the case of text

Note: The style used in this example is not used to convey information, structure or relationships.

The XHTML component:

Example Code:

    <p>09 <span class="caps">March</span> 2008</p>

The CSS component:

Example Code:

    .caps { text-transform:uppercase; }

### Example 8: Using CSS line-height to control spacing between lines of text

The CSS `line-height` property is used to display the line height for the paragraph at twice the height of the font.

The XHTML component:

Example Code:

    <p>Concern for man and his fate must always form the<br />
    chief interest of all technical endeavors. <br />
    Never forget this in the  midst of your diagrams and equations. </p>

The CSS component:

Example Code:

    p { line-height:2em; }

The CSS `line-height` property is used to display the line height for the text at less than the height of the font. The second line of text is positioned after the first line of text and visually appears as though the text is part of the first line but dropped a little.

The XHTML component:

Example Code:

    <h1 class="overlap"><span class="upper">News</span><br />
    <span class="byline">today</span></h1>

The CSS component:

Example Code:

    .overlap { line-height:0.2em;  }
    .upper { text-transform:uppercase; }
    .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }

### Example 9: Using CSS letter-spacing to space text

The CSS `letter-spacing` property is used to display the letters closer together in the second line of text.

The XHTML component:

Example Code:

    <h1 class="overlap"><span class="upper">News</span><br />
    <span class="byline">today</span></h1>

The CSS component:

Example Code:

    .overlap { line-height:0.2em;  }
    .upper { text-transform:uppercase; }
    .byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }

The CSS `letter-spacing` property is used to display the letters closer together in the second line of text.

The XHTML component:

Example Code:

    <h1 class="upper2">News</h1>

The CSS component:

Example Code:

    .upper2 { text-transform:uppercase; letter-spacing:1em; }

### Example 10: Using CSS background-image to layer text and images

The CSS `font-style` property is used to display the textual component of a banner and `background-image` property is used to display a picture behind the text.

The XHTML component:

Example Code:

    <div id="banner"><span id="bannerstyle1">Welcome</span>
    <span id="bannerstyle2">to your local city council</span></div>

The CSS component:

Example Code:

    #banner {
      color:white;
      background-image:url(banner-bg.gif);
      background-repeat:no-repeat;
      background-color:#003399;
      width:29em;
    }

    #bannerstyle1 {
      text-transform:uppercase;
      font-weight:bold;
      font-size:2.5em;
    }

    #bannerstyle2 {
      font-style:italic;
      font-weight:bold;
      letter-spacing:-0.1em;
      font-size:1.5em;
    }

### Example 11: Using CSS first-line to control the presentation of the first line of text

The CSS `:first-lin`e pseudo class is used to display the first line of text in a larger, red font.

The XHTML component:

Example Code:

    <p class="startline">Once upon a time...<br />
    ...in a land far, far away...  </p>

The CSS component:

Example Code:

    .startline:first-line { font-size:2em; color:#990000; }

### Example 12: Using CSS first-letter to control the presentation of the first letter of text

The CSS `:first-letter` pseudo class is used to display the first letter in a larger font size, red and vertically aligned in the middle.

The XHTML component:

Example Code:

    <p class="startletter">Once upon a time...</p>

The CSS component:

Example Code:

    .startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }

## Resources

Resources are for information purposes only, no endorsement implied.

- CSS2.1 Specification

- Learning CSS

- CSS and Accessibility

## Related Techniques

- C8: Using CSS letter-spacing to control spacing within a word
- C12: Using percent for font sizes
- C13: Using named font sizes
- C14: Using em units for font sizes
- C21: Specifying line spacing in CSS
- SCR34: Calculating size and position in a way that scales with text size

## Tests

### Procedure

1. Check whether CSS properties were used to control the visual presentation of text

### Expected Results

- Check #1 is true.

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