Techniques for WCAG 2.0

# CSS Techniques for WCAG 2.0

This Web page lists CSS Techniques from Techniques for WCAG 2.0: Techniques and Failures for Web Content Accessibility Guidelines 2.0. For information about the techniques, see Introduction to Techniques for WCAG 2.0. For a list of techniques for other technologies, see the Table of Contents.

## C6: Positioning content based on structural markup

### Applicability

All technologies that support CSS

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)
- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

### Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.

### Examples

#### Example 1

In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented.

Here is the content to be displayed:

Example Code:

     <div class="box">
      <dl>
        <dt class="menu1">Products</dt>
        <dd class="item1">Telephones</dd>
        <dd class="item2">Computers</dd>
        <dd class="item3">Portable MP3 Players</dd>
        <dt class="menu2">Locations</dt>
        <dd class="item4">Idaho</dd>
        <dd class="item5">Wisconsin</dd>
        </dt>
      </dl>
     </div>

Here is the CSS which positions and styles the above elements:

Example Code:

     .item1 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 7em;
     }
     .item2 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 8em;
     }
     .item3 {
       left: 0;
       margin: 0;
       position: absolute;
       top: 9em;
     }
     .item4 {
       left: 14em;
       margin: 0;
       position: absolute;
       top: 7em;
     }
     .item5 {
       left: 14em;
       margin: 0;
       position: absolute;
       top: 8em;
     }
     .menu1 {
       background-color: #FFFFFF;
       color: #FF0000;
       font-family: sans-serif;
       font-size: 120%;
       left: 0;
       margin: 0;
       position: absolute;
       top: 3em;
     }
     .menu2 {
       background-color: #FFFFFF;
       color: #FF0000;
       font-family: sans-serif;
       font-size: 120%;
       left: 10em;
       margin: 0;
       position: absolute;
       top: 3em;
     }
     #box {
       left: 5em;
       position: absolute;
       top: 5em;
     }

When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.

### Resources

Resources are for information purposes only, no endorsement implied.

- CSS-Discuss Home Page

- CSS-Discuss on CSS Layouts

### Related Techniques

- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

### Tests

#### Procedure

For content which uses CSS for positioning

1. Remove the style information from the document or turn off use of style sheets in the user agent.

2. Check that the structural relations and the meaning of the content are preserved.

#### Expected Results

- Check #2 is true.

## C7: Using CSS to hide a portion of the link text

### Applicability

All technologies that support CSS .

This technique relates to:

- Success Criterion 2.4.4 (Link Purpose (In Context))
  - How to Meet 2.4.4 (Link Purpose (In Context))
  - Understanding Success Criterion 2.4.4 (Link Purpose (In Context))
- Success Criterion 2.4.9 (Link Purpose (Link Only))
  - How to Meet 2.4.9 (Link Purpose (Link Only))
  - Understanding Success Criterion 2.4.9 (Link Purpose (Link Only))

### Description

The objective of this technique is to supplement the link text by adding additional text that describes the unique function of the link but styling the additional text so that it is not rendered on the screen by user agents that support CSS. When information in the surrounding context is needed to interpret the displayed link text, this technique provides a complete description of the link's input function while permitting the less complete text to be displayed.

This technique works by creating a CSS selector to target text that is to be hidden. The rule set for the selector places the text to be hidden in a 1-pixel box with overflow hidden, and positions the text outside of the viewport. This ensures the text does not display on screen but remains accessible to assistive technologies such as screen readers and braille displays. Note that the technique does not use `visibility:hidden` or `display:none` properties, since these can have the unintentional effect of hiding the text from assistive technology in addition to preventing on-screen display.

Note 1: This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on some Web sites. Other screen reader users and accessibility experts don't recommend this as a general technique because the results can be overly chatty and constrain the ability of the experienced screen reader user to control the verbosity. The working group believes the technique can be useful for Web pages that do not have repetitive content in the hidden text areas.

Note 2: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

### Examples

The following examples use the CSS selector and rule set below:

`a span { height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px; }`

#### Example 1

This example describes a news site that has a series of short synopsis of stories followed by a link that says "full story". Hidden link text describes the purpose of the link.

Example Code:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
    <link href="access.css" rel="stylesheet" type="text/css" />
    <title>Hidden Link Text</title>
    </head>
    <body>
    <p>Washington has announced plans to stimulate economic growth.
      <a href="#"> <span>Washington stimulates economic growth </span>
      Full Story</a></p>
    </body>
    </html>

#### Example 2

This example describes a resource that has electronic books in different formats. The title of each book is followed by links that say "HTML" and "PDF." Hidden text describes the purpose of each link.

Example Code:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
    <link href="access.css" rel="stylesheet" type="text/css" />
    <title>Hidden Link Text </title>
    </head>
    <body>
    <dl>
    <dt>Winnie the Pooh </dt>
       <dd><a href="winnie_the_pooh.html">
          <span>Winnie the Pooh </span>HTML</a></dd>
       <dd><a href="winnie_the_pooh.pdf">
             <span>Winnie the Pooh </span>PDF</a></dd>
    <dt>War and Peace</dt>
        <dd><a href="war_and_peace.html">
          <span>War and Peace </span>HTML</a></dd>
        <dd><a href="war_and_peace.pdf">
          <span>War and Peace </span>PDF</a></dd>
    </dl>
    </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- Hidden barriers - out of sight

- CSS in Action: Invisible Content Just for Screen Reader Users

### Related Techniques

- G91: Providing link text that describes the purpose of a link
- H33: Supplementing link text with the title attribute

### Tests

#### Procedure

For each `anchor` element using this technique:

1. Check that an element has been defined that confines its display to a pixel and positions text outside the display with overflow hidden

2. Check that the element of that class is included in the content of the `anchor`

3. Check that the combined content of the `anchor` describes the purpose of the link

#### Expected Results

- All checks above are true.

## C8: Using CSS letter-spacing to control spacing within a word

### Applicability

All technologies that support CSS.

This technique relates to:

- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

### Description

The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS `letter-spacing` property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.

### Examples

#### Example 1: Separating characters in a word

The following CSS would add the equivalent of a space between each character in a level-2 heading:

Example Code:

    h2
    {
    	letter-spacing: 1em;
    }

So for the markup:

Example Code:

    <h2>Museum</h2>

the rendered result might look something like:

Example Code:

    M u s e u m

### Resources

Resources are for information purposes only, no endorsement implied.

- CSS 2.0: Letter and word spacing

### Related Techniques

- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
- F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word

### Tests

#### Procedure

For each word that appears to have non-standard spacing between characters:

1. Check whether the CSS `letter-spacing` property was used to control spacing.

#### Expected Results

- Check #1 is true.

## C9: Using CSS to include decorative images

### Applicability

Any technology that can use CSS to include images.

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### Description

The objective of this technique is to provide a mechanism to add purely decorative images and images used for visual formatting to Web content without requiring additional markup within the content. This makes it possible for assistive technologies to ignore the non-text content. Some user agents can ignore or turn off CSS at the user's request, so that background images included with CSS simply "disappear" and do not interfere with display settings such as enlarged fonts or high contrast settings.

Background images can be included with the following CSS properties:

- `background`,

- `background-image`,

- `content`, combined with the `:before` and `:after` pseudo-elements,

- `list-style-image`.

Note: This technique is not appropriate for any image that conveys information or provides functionality, or for any image primarily intended to create a specific sensory experience.

### Examples

#### Example 1: Background image for an HTML page

The stylesheet for a Web page specifies a background image for the whole page.

Example Code:

     …
    <style type="text/css">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
    </style>
    </head>
    <body>
    …

#### Example 2: Background image with CSS for image rollovers

The stylesheet for a Web page uses the CSS `background` property to create a decorative rollover effects when a user hovers the mouse pointer over a link.

Example Code:

    a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
       text-decoration: none;
    }

#### Example 3: Background images with CSS to create rounded corners on tabs or other elements

The styleseet for a Web page uses the CSS `background` property to create rounded corners on elements.

Example Code:

    …
    <style type="text/css">
     div#theComments { width:600px; }
     div.aComment { background: url('images/middle.gif') repeat-y left top;
     margin:0 0 30px 0; }
     div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
     margin:0; padding:8px 16px; }
     div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
     margin:0; padding-top:30px; }
    </style>
    </head>
    <body>
    <div id="theComments">
     <div class="aComment">
      <blockquote>
       <p>Hi John, I really like this technique and I'm gonna use it on my own Website!</p>
      </blockquote>
      <div class="submitter">
       <p class="cite"><a href="http://example.com/">anonymous coward</a> from Elbonia</p>
      </div>
     </div>
     <div class="aComment">
     …
     </div>
    </div>
    …

#### Example 4: Image replacement used to enhance the visual appearance of a heading

In the following example, a decorative image is used to replace text within the heading element.

Example Code:

    <style type="text/css">
    h3#about {
    width: 480px;
    height: 34px;
    position: relative;
    }

    h3#about span {
    background: url(about.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }
    </style>
    ...
    <h3 id="about" title="About example.com"> <span></span>About example.com </h3>

### Resources

Resources are for information purposes only, no endorsement implied.

- The background property in the CSS 2.0 specification

- The HTML 4.01 specification states that the `background` attribute of the `body` element is deprecated

- Revised Image Replacement

- ImageReplacement - css-discuss

### Related Techniques

- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

### Tests

#### Procedure

1. Check for the presence of decorative images

2. Check that they are included with CSS

#### Expected Results

- If #1 is true, then #2 is true.

## C12: Using percent for font sizes

### Applicability

CSS

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)

### User Agent and Assistive Technology Support Notes

When font size is specified in any absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

When High Contrast Mode has been set from the Accessibility Control Panel on Windows, IE6 increases the size of the page text as if a percentage change had been set for the outermost window via CSS. Standard CSS layout behavior causes relative scaling to be multiplied, so the scaling of text within elements will be different in subtle ways. Firefox and IE7 do not change the scaling of the content based on the system settings in a way that affects CSS layout, so this effect does not occur in those browsers.

### Description

The objective of this technique is to specify text font size proportionally so that user agents can scale content effectively. If a font-size is specified for the `body` element, all other elements inherit that value, unless overridden by a more specific selector.

### Examples

#### Example 1: Percent font sizes in CSS

This example defines the font size for the `strong` element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

Example Code:

    strong {font-size: 120%}

    ...

    <h1>Letting the <strong>user</strong> control text size</h1>
    <p>Since only the user can know what size text works for him,
    it is <strong>very</strong> important to let him configure the text size.
    …

### Resources

Resources are for information purposes only, no endorsement implied.

- Cascading Style Sheets, Level 2 (CSS2), Fonts

- CSS 2 Font Size Property

- CSS-Discuss Font Size Using Percentages

### Related Techniques

- C13: Using named font sizes
- C14: Using em units for font sizes

### Tests

#### Procedure

1. Examine all CSS properties that define font size for each rule set.

2. Check that the value is a percentage.

#### Expected Results

- Check #2 is true

## C13: Using named font sizes

### Applicability

CSS

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)
- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

### User Agent and Assistive Technology Support Notes

When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

### Description

The objective of this technique is to specify a named font size that expresses the relative font size desired. These values provide hints so that the user agent can choose a font-size relative to the inherited font-size.

### Examples

#### Example 1: Named font sizes in CSS

This example selects a larger font size for `strong` elements so that their text will always be larger than the surrounding text, in whatever context they are used. Assuming that headings and paragraphs use different font sizes, the emphasized words in this example will each be larger than their surrounding text.

Example Code:

    strong {font-size: larger}

    ...

    <h1>Letting the <strong>user</strong> control text size</h1>
    <p>Since only the user can know what size text works for him,
    it is <strong>very</strong> important to let him configure the text size.
    …

### Resources

Resources are for information purposes only, no endorsement implied.

- Cascading Style Sheets, Level 2 (CSS2), Fonts

- CSS 2 Font Size Property

- CSS-Discuss Font Size Using Keywords

### Related Techniques

- C12: Using percent for font sizes
- C14: Using em units for font sizes

### Tests

#### Procedure

1. Examine all CSS properties that define font size of the CSS rule set.

2. Check that the value is one of `xx-small`, `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xsmaller`, or `larger`.

#### Expected Results

- Check #2 is true

## C14: Using em units for font sizes

### Applicability

CSS

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)
- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

### User Agent and Assistive Technology Support Notes

In Internet Explorer 6, using ems for font sizes will cause the text to grow more than using % or named font sizes. So, text-size/largest, might cause the text to grow more than 200% and have clipping problems.

When font size is given in absolute units of measurement, such as points or pixels, the Text Size menu commands in Internet Explorer 7 and earlier do not resize the text.

Internet Explorer 7 only changes the text size when the CSS is defined in a style element, keyed off an element as in the examples. When using inline style with the "style" attribute, the text size change is not supported.

### Description

The objective of this technique is to specify text font size in `em` units so that user agents can scale content effectively. Since the em is a property of the font, it scales as the font changes size. If a font-size is specified for the `body` element, all other elements inherit that value, unless overridden by a more specific selector.

### Examples

#### Example 1: Em font sizes in CSS

This example defines the font size for `strong` element so that its text will always be larger than the surrounding text, in whatever context it is used. Assuming that headings and paragraphs use different font sizes, the strong words in this example will each be larger than their surrounding text.

Example Code:

    strong {font-size: 1.6em}

    ...

    <h1>Letting the <strong>user</strong> control text size</h1>
    <p>Since only the user can know what size text works for him,
    it is <strong>very</strong> important to let him configure the text size.  </p>
    …

### Resources

Resources are for information purposes only, no endorsement implied.

- Cascading Style Sheets, Level 2 (CSS2), Fonts

- CSS 2 Font Size Property

- CSS-Discuss Font Size Using Ems

### Related Techniques

- C12: Using percent for font sizes
- C13: Using named font sizes

### Tests

#### Procedure

1. Examine all CSS properties that define font size for each rule set.

2. Check that the value is expressed in `em` units.

#### Expected Results

- Check #2 is true

## C15: Using CSS to change the presentation of a user interface component when it receives focus

### Applicability

CSS, HTML and XHTML

This technique relates to:

- Success Criterion 1.4.1 (Use of Color)
  - How to Meet 1.4.1 (Use of Color)
  - Understanding Success Criterion 1.4.1 (Use of Color)
- Success Criterion 2.4.7 (Focus Visible)
  - How to Meet 2.4.7 (Focus Visible)
  - Understanding Success Criterion 2.4.7 (Focus Visible)

### User Agent and Assistive Technology Support Notes

Internet Explorer 6.0 and earlier versions for Windows do not support dynamic pseudo-classes for any elements except hyperlinks. Internet Explorer 7 does not support :focus styles for elements other than hyperlinks. Include the :active CSS pseudo class to achieve the same effect as :focus in Internet Explorer for (X)HTML links (a element).

Firefox 1.5, Firefox 2.0 and SeaMonkey 1.1 for Windows support dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, and button elements. However, setting different colors or borders when a radio button or a check box receives focus is not supported.

Opera 9.02 for Windows supports dynamic pseudo-classes for text input fields, text areas, radio buttons, check boxes, select elements, submit/reset buttons, but not for button elements.

Firefox 2.0, Opera 9.02 and SeaMonkey 1.1 for Windows also support adjacent sibling selectors for form labels. Firefox 1.5, Internet Explorer 6.0 and earlier versions for Windows do not support adjacent sibling selectors for form labels.

### Description

The objective of this technique is to demonstrate how visual appearance may be enhanced via style sheets to provide visual feedback when an interactive element has focus or when a user hovers over it using a pointing device. Highlighting the element that has focus or is hovered over can provide information such as the fact that the element is interactive or the scope of the interactive element.

Providing visual feedback may be possible through more than one mode. Usually, it is attained through using a mouse to hover over the element or a keyboard to tab to the element.

### Examples

#### Example 1: Link elements

In this example, mouse and keyboard focus indicators have been applied to the link elements. CSS has been used to apply a background color when the link elements receive focus.

Here is the content to be displayed:

Example Code:

    <ul id="mainnav">
      <li class="page_item">Home</li>
      <li class="page_item"><a href="/services">Services</a></li>
      <li class="page_item"><a href="/projects">Projects</a></li>
      <li class="page_item"><a href="/demos">Demos</a></li>
      <li class="page_item"><a href="/about-us">About us</a></li>
      <li class="page_item"><a href="/contact-us">Contact us</a></li>
      <li class="page_item"><a href="/links">Links</a></li>
    </ul>

Here is the CSS that changes the background color for the above elements when they receive mouse or keyboard focus:

Example Code:

    #mainnav a:hover, #mainnav a:active, #mainnav a:focus {
      background-color: #DCFFFF;
      color:#000066;
    }

#### Example 2: Highlighting elements that receive focus

In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.

Example Code:

    <html>
      <head>
        <style type="text/css">
          input.text:focus {
            background-color: #7FFF00; color: #000;
          }
          input[type=checkbox]:focus + label, input[type=radio]:focus + label {
            background-color: #FF6: color: #000;
          }
        </style>
      </head>
      <body>
        <form method="post" action="form.php">
          <p><label for="fname">Name: </label>
            <input class="text" type="text" name="fname" id="fname" />
          </p>
          <p>
            <input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
            <input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
          <p>
        </form>
      </body>
    </html>

### Resources

Resources are for information purposes only, no endorsement implied.

- CSS 2.0: 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus

- CSS 2.0: 5.7 Adjacent sibling selectors

### Tests

#### Procedure

For each element able to attain focus:

1. Using a mouse, hover over the element.

2. Check that the background or border changes color.

3. Move the mouse away from the object before attempting keyboard focus.

4. Using a keyboard, tab to the element.

5. Check that the background or border changes color.

6. Check that the background or border changes in color are removed when the element loses focus.

#### Expected Results

- Checks #3, #5 and #6 are true.

## C17: Scaling form elements which contain text

### Applicability

(X)HTML, CSS

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)
- 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 ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.

Text-based form controls include input boxes (text and textarea) as well as buttons.

### Examples

#### Example 1: A Contact Form

A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way. This includes specifying a font size for the form controls themselves because the font size is not inherited in Internet Explorer.

The XHTML component:

Example Code:

    <h1>Contact Us</h1>
    <p>Please provide us with your details and we will contact you as soon as we can. Note that all of the form fields are required.</p>
    <label for="fname">First Name</label><input type="text" name="fname" id="fname" /><br />
    <label for="lname">Last Name</label><input type="text" name="lname" id="lname" /><br />
    <label for="phone">Telephone</label><input type="text" name="phone" id="phone" /><br />
    <label for="email">Email</label><input type="text" name="email" id="email" /><br />
    <input type="submit" name="Submit" value="Submit" id="Submit" />

The CSS component:

Example Code:

    h1 { font-size: 2em; }
                p, label, input { font-size: 1em; }

Here is a working example of this code: Example of resizing input with CSS.

#### Example 2: Radio button

This example works in IE with its text size feature. However, it doesn't scale in Firefox 2.0.

The XHTML component:

Example Code:

    <input type="radio" name="r1" value="r1" id="r1" class="geomsize" />
    <input type="checkbox" name="c1" id="c1" value="c1" class="geomsize" />

The CSS component:

Example Code:

    input.geomsize {
    width: 1.2em;
    height: 1.2em;}

Here is a working example of this code: Example of resizing radio buttons and checkboxes with CSS.

### Tests

#### Procedure

1. Enter some text into text-based form controls that receive user entered text.

2. Increase the text size of the content by 200%.

3. Check that the text in text-based form controls has increased by 200%.

#### Expected Results

- #3 is true.

## C18: Using CSS margin and padding rules instead of spacer images for layout design

### Applicability

All technologies that support CSS

This technique relates to:

- Success Criterion 1.1.1 (Non-text Content)
  - How to Meet 1.1.1 (Non-text Content)
  - Understanding Success Criterion 1.1.1 (Non-text Content)

### User Agent and Assistive Technology Support Notes

On the Microsoft Windows platform, Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 in "quirks mode" and Internet Explorer 7 in "quirks mode" use a box model that deviates from the W3C CSS specification: in these browser versions, right and left padding, and right and left borders do not increase the total width of an element, so the space for the content inside such an element will be narrower. (This behavior is known as the "box model bug".) Internet Explorer 5.5 on Mac OS, and Internet Explorer 6 and 7 on Windows in "standards compliant mode" use the box model defined in the W3C CSS specification.

### Description

Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.

### Examples

#### Example 1

The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.

Example Code:

                  table { margin: .5em; border-collapse: collapse; }
                  td, th { padding: .4em; border: 1px solid #000; }

                ...

                  <table summary="Titles, authors and publication dates of books in Web development category">
                    <caption>Books in the category 'Web development'</caption>
                    <thead>
                      <tr>
                        <th>Title</th>
                        <th>Author</th>
                        <th>Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>How to Think Straight About Web Standards</td>
                        <td>Andrew Stanovich</td>
                        <td>1 April 2007</td>
                      </tr>
                    </tbody>
                  </table>

### Resources

Resources are for information purposes only, no endorsement implied.

- Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' in the CSS2 specification

- Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' in the CSS2 specification

- A CSS styled table version 2

- IE box model bug

- Internet Explorer and the CSS box model

### Tests

No tests available for this technique.

## C19: Specifying alignment either to the left OR right in CSS

### Applicability

All technologies that support 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

This technique describes how to align blocks of text either left or right by setting the CSS `text-align` property.

### Examples

#### Example 1

In the following example, text is aligned left. In the style sheet, define the class:

Example Code:

    p.left {text-align: left}

In the content call the up the class.

Example Code:

    <p class="left"> Lorem ipsum dolor sit …</p>

#### Example 2

In the following example, text is aligned right.

Example Code:

    p.right {text-align: right}

In the content call the up the class.

Example Code:

    <p class="right"> Lorem ipsum dolor sit …</p>

### Tests

#### Procedure

1. Check that the text is aligned either left or right.

#### Expected Results

- Check #1 is true.

## 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.

## C21: Specifying line spacing in CSS

### Applicability

All technologies that support 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

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

### Examples

#### Example 1

Setting the element to 1.5 line height. In the style sheet set the characteristics of the element.

Example Code:

    p { line-height: 150%; }

In the content the element will now be 1.5 line height, throughout the document.

Example Code:

    <p> Lorem ipsum dolor sit …  </p>

#### Example 2

Setting a class to 1.5 line height (space-and-a-half line spacing). In the stylesheet, define the class.

Example Code:

    p.tall {line-height:150%}

In the content, call up the class.

Example Code:

    <p class="tall"> Lorem ipsum dolor sit …  </p>

#### Example 3

Setting a class to double-spaced line height. In the stylesheet, define the class.

Example Code:

    p.tall {line-height:200%}

In the content, call up the class.

Example Code:

    <p class="tall"> Lorem ipsum dolor sit …  </p>

### Tests

#### Procedure

1. Open content in a browser.

2. Check that the spacing between lines in blocks of text is between 1.5 and 2.

#### Expected Results

- Test Procedure #2 is true.

## 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.

## C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

### 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)

### User Agent and Assistive Technology Support Notes

Most browsers allow the user to change the color settings to override the Web page's CSS and HTML color schemes. This is supported by all versions of Internet Explorer, Firefox, Mozilla, Netscape, and Opera after version 6.

When specified colors are overridden in Firefox and Netscape, most Javascript pop-up boxes and drop-down menus become unusable. Pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background.

Internet Explorer 6 will not override background colors unless the same background color has also been selected in the system settings.

### Description

Some Web pages use colors to identify different groupings. The objective of this technique is to allow users to select specific color combinations for the text and background of the main content while retaining visual clues to the groupings and organization of the web page. When a user overrides the foreground and background colors of all the text on a page, visual clues to the grouping and organization of the Web page may be lost, making it much more difficult to understand and use.

When an author does not specify the colors of the text and background of the main content, it is possible to change the colors of those regions in the browser without the need to override the colors with a user style sheet. Specifying the text and background colors of secondary content means that the browser will not override those colors.

With this technique the author uses the default text color and background color of the main area. As a result the colors are completely determined by the user agent via the user's color preferences. The user can ensure that the color selection best meets his needs and provides the best reading experience.

### Examples

#### Example 1

An HTML Web page uses CSS to specify the text and background colors of all secondary content such as navigation bars, menu bars, and the table of contents. Neither the text color nor background of the main content is specified. The user sets their own color preferences in the browser so that they view the main content in colors and contrasts that work well for them. The distinction between the separate sections of the page are still visually obvious.

#### Example 2

A music magazine has an article that is blue text on a white background. The site provides a link near the beginning of the page which assigns a different style sheet to the page. The new style sheet does not have any colors specified for the text or background.

### Resources

Resources are for information purposes only, no endorsement implied.

- BBC's Web page with instructions how to change the browser colors in most browsers

### Related Techniques

- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
- G175: Providing a multi color selection tool on the page for foreground and background colors
- C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

### Tests

#### Procedure

1. Change the text, link and background colors in the browser settings so they are different from the default color and different from those specified in the secondary content.

   Note: Do not select the option that tells the browser to ignore the colors specified in the page.

2. Check that the main content uses the new text, link and background colors.

3. Check that the colors of the text, links and backgrounds in the secondary content has not changed.

#### Expected Results

- Checks #2 and #3 are true.

## 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.

## C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors

### 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 intent of this technique is to specify borders and layout using CSS and leave text and background colors to render according to the user's browser and/or operating system settings. This allows users to view the text in the colors they require while maintaining other aspects of the layout and page design such as columns of text, borders around sections or vertical lines between a menu and main content area. It will also prevent some display issues in some browsers when pages contain Javascript pop-up boxes or drop-down menus and have the colors overridden.

Borders and layout indicators help many people with cognitive disabilities, as does flexibility over the text and background colors. Sometimes these two needs are in conflict when the user has to over-ride the author's color selection of text and background in the browser and the browser also removes the borders and the intended layout. This can mean the page is displayed in a single column with one block of content below the other, which can result in unnecessary whitespace and long lines of text. It can also mean that pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background. When a Web author does not specify the colors of any text and background, while specifying border colors and layout, it is possible, in most popular browsers, to change the text and background colors without affecting the other (author-specified) CSS declarations.

### Examples

#### Example 1

A Web page is designed using HTML. CSS is used to specify border colors around discrete areas of the page and to layout the content so that the menu floats to the left of the main content area. Neither the text color nor background is specified. The user sets their own colors in the browser. They can view the page in colors and contrasts that work well for them without disrupting the layout.

### Resources

Resources are for information purposes only, no endorsement implied.

- BBC's Web page with instructions how to change the browser colors in most browsers

### Related Techniques

- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
- G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
- C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content

### Tests

#### Procedure

1. Open the Web page in a browser that allows users to change colors of HTML content.

2. Change the text, link and background colors in the browser settings so they are different than those currently set in the browser.

   Note: Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.

3. Return to the page and check that it is displaying the page in the new text, link and background colors.

4. Check that any borders are still displayed and that the layout is retained.

#### Expected Results

- Checks #3 and Check #4 are true.

## C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

### 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

There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology.

It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.

For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually. (i.e., scrolling is only necessary to see other columns, but not for the left or right edges of each individual column. I find it hard to formulate this in a completely unambiguous way.)

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

### Examples

#### Example 1

A real estate company has an online annual report that has an identical layout to that of their print version, and as such, requires horizontal scrolling to read a line of text. A control is on the page that switches the stylesheet and provides a layout that does not require horizontal scrolling.

#### Example 2

A financial spreadsheet is online. It includes text explaining changes in the housing market in January. Off-screen to the right, there is a column with an explanation of changes to the market in September. The user can horizontally scroll to the September area and read each line of text without any further scrolling when the window size is maximized.

### 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. Open the content that requires horizontal scrolling on a full screen window.

2. Check that there is an option within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.

3. Activate the option.

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

#### Expected Results

- Checks #2 and #4 are true.

## C27: Making the DOM order match the visual order

### Applicability

CSS used with HTML and XHTML

This technique relates to:

- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)
- Success Criterion 2.4.3 (Focus Order)
  - How to Meet 2.4.3 (Focus Order)
  - Understanding Success Criterion 2.4.3 (Focus Order)

### Description

The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content. The order of content in the source code can be changed by the author to any number of visual presentations with CSS. Each order may be meaningful in itself but may cause confusion for assistive technology users. This could be due to the user switching off the author-specified presentation, by accessing the content directly from the source code (such as with a screen reader), or by interacting with the content with a keyboard. If a blind user, who reads the page with a screen reader that follows the source order, is working with a sighted user who reads the page in visual order, they may be confused when they encounter information in different orders. A user with low vision who uses a screen magnifier in combination with a screen reader may be confused when the reading order appears to skip around on the screen. A keyboard user may have trouble predicting where focus will go next when the source order does not match the visual order.

There may also be situations where the visually presented order is necessary to the overall understanding of the page, and if the source order is presented differently, it may be much more difficult to understand.

When the source order matches the visual order, everyone will read the content and interact with it in the same (correct) order.

Note: The `tabindex` attribute in HTML has two functions. One is to make an element focusable and the other is to assign the element a position in the focus order. A `tabindex` of 0 makes an element focusable, but adds it to the focus order in the order of source elements. The focus order will follow positive values of tabindex in ascending order. Setting `tabindex` values that result in an order different from the order of elements in the Document Object Model (DOM) can mean the order is incorrect for users of assistive technologies. This is largely because the tabindex property is specified in the HTML or XHTML and not the CSS. This may change in future specifications. It may also differ from the visual presentation order.

### Examples

- An online newspaper has placed a navigation bar visually in the top left corner of the page directly below its initial logo. In the source code, the navigation elements appear after the elements encoding the logo.

### Resources

Resources are for information purposes only, no endorsement implied.

- Microsoft Internet Explorer Developer Toolbar. Allows examination of script-generated DOM in Microsoft Internet Explorer.

- Firebug. Allows examination of script-generated DOM in Firefox.

### Related Techniques

- H4: Creating a logical tab order through links, form controls, and objects
- G57: Ordering the content in a meaningful sequence
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content

### Tests

#### Procedure

1. Visually examine the order of the content in the Web page as it is presented to the end user.

2. Examine the elements in the DOM using a tool that allows you to see the DOM.

3. Ensure that the the order of the content in the source code sections match the visual presentation of the content in the Web page. (e.g., for an English language page the order is from top to bottom and from left to right.) "

#### Expected Results

- Step #3 is true.

## C28: Specifying the size of text containers using em units

### Applicability

CSS

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)

### User Agent and Assistive Technology Support Notes

In Internet Explorer 6, Windows High Contrast Mode will resize percent-based fonts in nested tables to be too large. Firefox and later versions of IE do not resize fonts in High Contrast Mode, and don't have this issue.

### Description

The objective of this technique is to specify the width and/or height of containers, that contain text or that will accept text input, in `em` units. This will allow user agents that support text resizing to resize the text containers in line with changes in text size settings.

The width and/or height of text containers that have been specified using other units risk text cropping because it falls outside the container boundaries when the text size has been increased.

The containers generally control the placement of text within the Web page and can include layout elements, structural elements and form controls.

### Examples

#### Example 1: Em units for sizes for layout container containing text

In this example, a `div` element, with `id` value of "nav_menu", is used to position the navigation menu along the left-hand side of the main content area of the Web page. The navigation menu consists of a list of text links, with `id` value of "nav_list." The text size for the navigation links and the width of the container are specified in `em` units.

Example Code:

    #nav_menu { width: 20em; height: 100em }

    #nav_list { font-size: 100%; }

#### Example 2: Em units for text-based form controls

In this example, `input` elements that contain text or accept text input by the user have been given the class name "form1." CSS rules are used to define the font size in `percent` units and width for these elements in `em` units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped (because the width of the form control itself also resizes according to the font size).

Example Code:

    input.form1 { font-size: 100%; width: 15em; }

#### Example 3: Em units in dropdown boxes

In this example, `select` elements have been given the class name "pick." CSS rules are used to define the font size in `percent` units and width in `em` units. This will allow the text within the form control to resize in response to changes in text size settings without being cropped.

Example Code:

    input.pick { font-size: 100%; width: 10em; }

#### Example 4: Em units for non-text-based form controls

In this example, `input` elements that define checkboxes or radio buttons have been given the class name "choose." CSS rules are used to define the width and height for these elements in em units. This will allow the form control to resize in response to changes in text size settings.

Example Code:

    input.choose { width: 1.2em; height: 1.2em; }

### Related Techniques

- C12: Using percent for font sizes
- C14: Using em units for font sizes
- C17: Scaling form elements which contain text
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized

### Tests

#### Procedure

- Identify containers that contain text or allow text input.

- Check the container's width and/or height are specified in `em` units.

#### Expected Results

- Check #2 is true.

## C29: Using a style switcher to provide a conforming alternate version

### Applicability

CSS used with client-side or server-side scripting.

This technique relates to:

- Conformance Requirement 1 (Conformance Level)

### Description

When some aspect of the default presentation of a Web page has does not meet a Success Criterion, it is possible to meet that requirement using the "Alternate Version" clause in the conformance requirements (Conformance Requirement 1). For some requirements, invoking a style switcher via a link or control on the page that can adjust the presentation so that all aspects of the page conform at the level claimed allows authors to avoid having to provide multiple versions of the same information.

The objective of this technique is to demonstrate how CSS can be used in combination with scripting to provide conforming alternate versions of a Web page. In this technique, an author provides alternative views of the content by providing controls that adjust the CSS that is used to control the visual presentation of content. Controls provided within the Web page allow users to select or modify the presentation in a way that meets the success criterion at the level claimed. This makes it possible for different visual presentations to be selected by users in situations such as the following:

- the user may not be able to adjust browser or operating system settings, due to a lack of familiarity or rights

- the text is provided in a manner that does not respond to browser or operating system settings (such as text within an image)

- the default presentation of the content does not include sufficient contrast for some users

For this technique to be used successfully, three things must be true.

1. The link or control on the original page must itself meet the success criteria to be met via the alternate presentation. For example, if a style switcher is used to provide increased font sizes and the control is presented using a small font, users may not be able to activate the control and view the alternate presentation.

2. The new page must contain all the same information and functionality as the original page.

3. The new page must conform to all of the Success Criteria for the desired level of conformance. For example, an alternate stylesheet can not be used to meet one requirement if it causes a different requirement to no longer conform.

When using a style switcher, it is important to consider the following challenges and limitations:

- The number and type of changes that a user can make is limited to the scope of the controls provided by the author of the Web page. A variety of presentation and preferences should be provided in order to address the needs of as wide an audience as possible. However, it is also important for authors to consider interactions between preferences and the complexity for users that might result from providing large numbers of options to users.

- Maintaining the user's preference from one page to the next may be achieved by storing a cookie on the user's machine (see Resources section for more information) or by including their preferences in a profile saved on the Web server by passing a query string parameter, or by other means.

- The technical method used to implement a style switcher may be subject to the support and availability of one or more technologies on the user's machine (for example, many client-side solutions require support for both JavaScript and CSS). Unless these technologies are relied upon for conformance, authors should consider using server-side technologies where client-side support and availability of technologies can not be assured. Alternatively, the use of techniques which ensure that content will transform gracefully when one or more of the technologies used are not available can be an effective way to enhance pages when support for these technologies is not relied upon for conformance.

### Examples

#### Example 1: Using a JavaScript control to apply a different external CSS file

This example is of a page that provides links to change text and background colors for the page via JavaScript. The links should only be inserted if JavaScript is supported by and available on the user's system. Otherwise, selecting the links will not result in the desired changes. This can be achieved by using script to insert the links themselves (which means that the links would only be present when scripting is supported and available).

The following code shows the JavaScript-dependent color-change links and a snippet of other content in the Web page, the associated style sheet rules, and the JavaScript that changes the style sheet in use when a color-change link is selected.

The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

The XHTML components:

Example Code:

    In <head> section:

      <link href="main.css" rel="stylesheet" type="text/css" />
      <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />

    In <body> section:

    <div id="colorswitch">
    <p>Change colors:</p>
      <ul class="inline">
        <li><a href="#" onClick="javascript:changeColors('altColors1.css');return false;"
          id="altColors1">dark blue on white</a></li>
        <li><a href="#" onClick="javascript:changeColors('altColors2.css');return false;"
          id="altColors2">yellow on black</a></li>
        <li><a href="#" onClick="javascript:changeColors('altColors3.css');return false;"
          id="altColors3">black on pale yellow</a></li>
        <li><a href="#" onClick="javascript:changeColors('altColors4.css');return false;"
          id="altColors4">black on white</a></li>
        <li><a href="#" onClick="javascript:changeColors('defaultColors.css');return false;"
          id="default">Reset to default</a></li>
      </ul>
    </div>
    <div id="mainbody">
      <h1>Conference report</h1>
      <p>Last week's conference presented an impressive line-up of speakers...</p>
    </div>

The CSS components:

Example Code:

    In main.css:

    body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }

    #mainbody {
        padding: 1em;
    }

    #colorswitch {
        float: right;
        width: 12em;
        border: 1px #000066 solid;
        padding:0 1em 1em 1em; margin:0;
    }

    #colorswitch p {
        padding-top:.5em;
        font-weight:bold;
    }

    In defaultColors.css:

    body, p {
        color:#000000;
        background-color:#FFFFFF;
    }

    h1, h2, h3 {
            color:#990000;
            background-color:#FFFFFF;
    }

    In altColors1.css:

    body, h1, h2, h3, p, a {
        color:#000066;
        background-color:#FFFFFF;
    }

    In altColors2.css:

    body, h1, h2, h3, p, a {
        color:#FFFF33;
           background-color:#000000;
    }

    In altColors3.css:

    body, h1, h2, h3, p, a {
        color:#000000;
        background-color:#FFFF99;
    }

    In altColors4.css:

    body, h1, h2, h3, p, a {
        color:#000000;
        background-color:#FFFFFF;
    }

The JavaScript components:

Example Code:

    function changeColors (newCSS)
    {
      document.getElementById('currentCSS').href = newCSS;
    }

A working example of this code, Using a JavaScript control to apply a different external CSS file, is available.

#### Example 2: Using a client-side JavaScript to change a CSS property

This example be used for simple changes to a section of content and may be less practical for complex sites or pages. The example uses a client-side JavaScript to change the class name to visually present the user's color selection (from a defined set of options) as a background for highlighting specific content.

Note: The following code includes JavaScript calls within the XHTML code to aid understanding of the technique. However, the author is encouraged to use current best practice for including JavaScript (see resources for more information about Unobtrusive JavaScript and progressive enhancement).

The XHTML components:

Example Code:

    <h1>Product comparison</h1>
    <p>The products you selected to compare are listed below.
    Any differences between the products are highlighted and italicized.</p>
    <p class="inlinePara">Change hightlight color: </p>
    <ul class="inline">
      <li><a href="#" onClick="changeColor('hghltLightYellow');return false;"
        class="hghltLightYellow">light yellow</a></li>
      <li><a href="#" onClick="changeColor('hghltBrightYellow');return false;"
        class="hghltBrightYellow">bright yellow</a></li>
      <li><a href="#" onClick="changeColor('hghltLightBlue');return false;"
        class="hghltLightBlue">light blue</a></li>
      <li><a href="#" onClick="changeColor('hghltBrightBlue');return false;"
        class="hghltBrightBlue">bright blue</a></li>
      <li><a href="#" onClick="changeColor('hghltLightRed');return false;"
        class="hghltLightRed">light red</a></li>
      <li><a href="#" onClick="changeColor('hghltDrkRed');return false;"
        class="hghltDrkRed">dark red</a></li>
    </ul>
    <table width="400" border="1">
      <tr>
        <td> </td>
        <th scope="col">Product 1</th>
        <th scope="col">Product 2</th>
      </tr>
      <tr>
        <th scope="row">Aspect 1</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
      <tr>
        <th scope="row">Aspect 2</th>
        <td class="hghltLightYellow">Yes</td>
        <td class="hghltLightYellow">No</td>
      </tr>
      <tr>
        <th scope="row">Aspect 3</th>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </table>

The CSS components:

Example Code:

    body { color:#000000; background-color:#FFFFFF; }

    .hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
    .hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
    .hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
    .hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
    .hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
    .hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }

    .inlinePara {display:inline; }
    .inline {display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
    .inline li { display:inline; }
    .inline li a {padding: 0.5em 1em; border: 2px solid #000000; }

The JavaScript components:

Example Code:

    function changeColor(hghltColor)
    {
      // collects table data cells into an array

     var els = document.getElementsByTagName('td');

      // for each item in the array, look for a class name starting with "hghlt"
      // if found, change the class value to the current selection
      // note that this script assumes the  'td' class attribute is only used for highlighting

      for (var i=0; i<els.length; i++)
      {
        if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
      }
    }

A working example of this code, Using a client-side JavaScript to change a CSS property, is available.

#### Example 3: Using PHP $_GET to apply a different external CSS file

This simple example uses PHP $_GET to assign one of two available external style sheets. Similar functionality could be achieved using a variety of PHP features. The example applies only to the current page view. In a production environment, it would be advisable to save this preference in a cookie or server-side user profile, so that users would only have to make the selection once per site.

The following code is PHP, but a similar approach would work with a variety of server-side technologies.

The PHP and XHTML components:

Example Code:

    At the beginning of the PHP page:

    <?php
    $thestyle = $_GET['set'];
    if ($thestyle == "style1")
    	{
    	$thestyle = "style2";
    	}
    else
    	{
    	$thestyle = "style1";
    	}
    ?>

    In the <head> section:

       <link rel="stylesheet" type="text/css" media="screen" href="<?php echo($thestyle);?>.css" >

    In <body> section:

    <?php
    if ($thestyle == "style1") {
    	echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
    	}
    else {
    	echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
    	}
    ?>

    <div id="mainbody">
      <h1>Conference report</h1>
      <p>Last week's conference presented an impressive line-up of speakers...</p>
    </div>

The CSS components:

Example Code:

    In style1.css:

      body, p { color:#000000; background-color:#FFFFFF; }
      h1, h2, h3 {color:#990000; background-color:#FFFFFF; }

    In style2.css:

      body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }

A working example of this code, Using PHP $_GET to apply a different external CSS file, is available.

#### Example 4: Using JSP to provide an alternative style sheet

The example below uses two files

- a Java Server Page (JSP) with the form and the the form processing code, and

- an include file with functions used by the previous page and in other pages use the same style.

The server-side code outputs a normal link element for the stylesheet that the user chooses and link elements with "alternate stylesheet" for the other styles. The code can thus be used as a fallback for the client-side code in the second example.

The JSP page with the form:

Example Code:

     <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
     %><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <head>
       <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
       <title>Change Style</title>
       <%
         String fStyle = "";
         String styleName = "style";
         String defaultStyle = "default";
         Cookie[] cookies = request.getCookies();

         // get style from post request parameters
         if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
           fStyle = request.getParameter("styleSelect");
           // code that validates user input (security) not shown

           if (fStyle.equals("nostyle")) { // user prefers no author style
           } else { // user requests author style
             out.println(createStyleLinks(fStyle).toString());
           }

           storeStylePreferenceCookie(request, response, fStyle);
         } else if (request.getMethod().equals("GET")) {
         // GET request; get style from cookie; else default style links
           // get style from cookie
           if (cookies != null) {
             // get style from cookies
             fStyle = getStyleFromCookies(cookies);

             if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
                 out.println(createStyleLinks(fStyle).toString());
             } else { // no cookie for style; process request for style preference
               // default style links
               out.println(createStyleLinks(defaultStyle).toString());
             }
           } else { // GET request without cookies: default styles
             out.println(createStyleLinks(defaultStyle).toString());
           }//end else cookies
         }
       %>
     </head>
     <body id="home">
       <form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
         <p><label for="styleSelect">Select style: </label>
           <select id="styleSelect" name="styleSelect">
             <option value="default">Default (shades of green)</option>
             <option value="wonb">White on black</option>
             <option value="bonw">Black on white</option>
           </select>
           <input type="submit" value="Change Style" />
         </p>
       </form>
     </body>
     </html>

The styleswitcher.jsp file included in the previous file:

Example Code:

     <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
     <%!
       /**
        * Get the links (link elements) to the CSS files based on cookies, ...
       */
       private String getStyleLinks(HttpServletRequest request) {
         String styleLinks = "";
         Cookie[] cookies = request.getCookies();
         String defaultStyle = "default";
         String tempStyle = "";
         // GET request; get style from cookie; else default style links
         // get style from cookie
         if (cookies != null) {
           // get style from cookies
           tempStyle = getStyleFromCookies(cookies);

           if ( tempStyle.equals("NULL_STYLE") ) {
             // no cookie for style; process request for style preference
             // default style links
             styleLinks = createStyleLinks(defaultStyle).toString();
           } else { // user requests author style
             styleLinks = createStyleLinks(tempStyle).toString();
           }
         } else { // GET request without cookies: default styles
           styleLinks = createStyleLinks(defaultStyle).toString();
         }//end else cookies

         return styleLinks;
       }

       /**
        * Get style cookie from request
       */
       private String getStyleFromCookies( Cookie[] cookies ) {
         String fStyle = "NULL_STYLE";
         for (int i = 0; i < cookies.length; i++) {
           Cookie cookie = cookies[i];
           String name = cookie.getName();

           if ( name.equals("style") ) {
             fStyle = cookie.getValue();
             // code that validates cookie value (security) not shown
           }
         }
         return fStyle;
       }

       /**
        * Store the style preference in a persistent cookie
       */
       private void storeStylePreferenceCookie(HttpServletRequest request,
         HttpServletResponse response, String theStyle) {
         final int ONE_YEAR = 60 * 60 * 24 * 365;
         Cookie styleCookie = new Cookie("style", theStyle);
         styleCookie.setMaxAge(ONE_YEAR);
         response.addCookie(styleCookie);
       }

       /**
        * Create the link elements for the stylesheets
       */
       private StringBuffer createStyleLinks(String prefStyle) {
         StringBuffer theStyleLinks = new StringBuffer();
         //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file)
         // and strings for the title attribute of the link element
        // the identifiers must correspond to the in the "value" attributes in the "option"
        // elements in the style switcher form
         String [] [] styles = {
           { "default", "Default style"},
           { "wonb", "White on black"},
           { "bonw", "Black on white"}
         };

         // loop over 2dim array: if styles[i][1] matches prefStyle,
         // output as normal, else as alternate stylesheet
         for (int i = 0; i < styles.length; i++) {
           if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
             theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
               .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
           } else { // output other stylesheets as alternate stylesheets
             theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
               .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
               .append("\" type=\"text/css\" />").append("\n");
           }
         } // end for loop

         return theStyleLinks;
       }
     %>

Other JSP pages can use this code by means of the following include and scriptlet code:

Example Code:

     <%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %>

### Resources

Resources are for information purposes only, no endorsement implied.

- StyleSwitching - css-discuss

- Build your own PHP style sheet switcher

#### Using cookies

A user's selection can be made persistent across pages, and from one visit to another, by storing information on the user's computer via a cookie. This functionality requires cookies to be supported by and allowed on the user's computer. Cookies can be created, read, modified and erased by using client-side scripts, such as Javascript, or by server-side scripts, such as CGI scripts. Reliance on client-side technologies will require the support and availability of the technology on the user's computer in addition to supporting and allowing cookies.

Information on creating and using cookies can be found on the web. Here are some suggestions:

- JavaScript - Cookies

- Write Your First HTTP Cookie

- ASP Cookies

- Programming Ruby

It is recommended that authors test for cookie support and provide an extra control if cookies are not supported. This extra control should include information about the persistence of the selection, such as "Apply selection to all pages". The message or page presented to the user in response to selecting the extra control provides information about the cookie requirement and their options for solving it. In the event that the user is unable to turn cookie support on, include a statement about what this will mean for them if they choose to continue to browse the site and provide information about how they can adjust their user agent to achieve similar results.

For example, "Your browser is not configured to accept cookies. On this site, cookies are required in order to apply your selected changes across all of the pages of the site. To find out how to enable cookies on your computer, visit How to Enable Cookies. Note that this may require administrative rights for the computer you are using. Without cookie support, your settings will not persist to include other pages on this site. We are endeavoring to provide this functionality without relying on your computer's capability. In the meantime, you will be able to select the change for each page that you visit."

#### Progressive Enhancement and Unobtrusive Javascript

Current best practice for implementing JavaScript in an HTML or XHTML page is to use it in a way that separates the behavior of content from its structure and presentation. The terms 'Progressive Enhancement' and 'Unobtrusive JavaScript' are often used to describe scripts that enhance or improve the functionality of a page, yet transform gracefully so that content continues to function even when JavaScript is not supported.

Here are some suggested starting points for more information:

- Behavioral Separation

- Wikipedia: Unobtrusive JavaScript

- About.com: Unobtrusive JavaScript

- Progressive enhancement

- Hijax

### Related Techniques

- G140: Separating information and structure from presentation to enable different presentations
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent
- G188: Providing a button on the page to increase line spaces and paragraph spaces
- G189: Providing a control near the beginning of the Web page that changes the link text
- G191: Providing a link, button, or other mechanism that reloads the page without any blinking content
- C7: Using CSS to hide a portion of the link text
- C22: Using CSS to control visual presentation of text
- C26: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text

### Tests

#### Procedure

1. Check that the Web page contains controls that allow users to select alternate presentations.

2. Check that the control changes the presentation.

3. Verify that the resulting page is a conforming alternate version for the original page.

#### Expected Results

- All of the above checks are true.

## C30: Using CSS to replace text with images of text and providing user interface controls to switch

### Applicability

Any technology that supports CSS.

This technique relates to:

- 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 replace structured HTML text with images of text in a way that makes it possible for users to view content according to their preferences. To use this technique, an author starts by creating an HTML page that uses semantic elements to mark up the structure of the page. The author then designs two or more stylesheets for that page. One stylesheet presents the HTML text as text and the second uses CSS features to replace some of the HTML text with images of text. Finally, through the use of server-side or client-side scripting, the author provides a control that allows the user to switch between the available views.

This technique can be used to meet Success Criterion 1.4.5 or 1.4.9 if a presentation that does not include images of text is available and as long as the user interface control that is provided to allow users to switch to an alternate presentation meets the relevant criteria. Where possible, authors should deliver the presentation that does not include images of text as the default presentation. In addition, the control used to switch should be located near the beginning of the page.

A variety of "image replacement" techniques have been developed to address a variety of user agent, configuration and compatibility with assistive technology issues (See resources for more information). While there are a variety of approaches authors may use to replace text, it is important to consider compatibility with assistive technology, whether the technique will work correctly if scripting, CSS, images (or combinations of these) are turned off. Since it can be difficult to find a single solution that works in all cases, this technique recommends the use of a control that allows users to switch to a presentation that does not include an image replacement technique.

Note: This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and Understanding Conforming Alternate Versions for more information.

### Examples

#### Example 1

A design studio site uses a style switcher to allow users to view two presentations of their home page. For the default version, the heading text is replaced with images of text. A control on the page allows users to switch to a version that presents the headings as text.

The CSS component:

Example Code:

    ...
    <div id="Header">
      <h1><span>Pufferfish Design Studio</span></h1>
      <h2><span>Surprising Identity and Design Solutions</span></h2>
      </div>
    ...

The CSS for the presentation that includes images of text follows. Note that the CSS uses positioning to place the contents of the heading elements offscreen so that the text remains available to screen reader users.

Example Code:

    ...
    #Header h1 {
    	background-image: url(pufferfish-logo.png);
    	height: 195px;
    	width: 290px;
    	background-repeat: no-repeat;
    	margin-top: 0;
    	position: absolute;
    	}
    #Header h1 span {
    	position: absolute;
            left: -999em;
    	}
    #Header h2 {
    	background-image: url(beauty.png);
    	background-repeat: no-repeat;
    	height: 234px;
    	width: 33px;
    	margin-left: 8px;
    	position: absolute;
    	margin-top: 250px;
    	}
    #Header h2 span {
    	position: absolute;
            left: -999em;
    	}

The CSS for the presentation that does not include images of text.

Example Code:

    ...
    #Header h1 {
    	font: normal 200%/100% Garamond, "Times New Roman", serif;
    	margin-bottom: 0;
    	color: #000099;
    	background: #ffffff;
    	}

    #Header h2 {
    	font: normal 160%/100% Garamond, "Times New Roman", serif;
    	margin-bottom: 0;
    	color: #336600;
    	background: #ffffff;
    	}

### Resources

Resources are for information purposes only, no endorsement implied.

- Accessible Image Replacement

- Image Replacement—No Span

- Replacing Text By An Image

- Facts and Opinion About Fahrner Image Replacement

- In Defense of Fahrner Image Replacement

- Fahrner Image Replacement

- CSS2: 14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'

- sIFR

### Related Techniques

- C29: Using a style switcher to provide a conforming alternate version
- F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information

### Tests

#### Procedure

1. Check that the Web page includes a control that allows users to select an alternate presentation.

2. Check that when the control is activated the resulting page includes text (programmatically determined text) wherever images of text had been used.

#### Expected Results

- All of the above checks are true.

CSS1
  "Cascading Style Sheets, level 1," B. Bos, H. Wium Lie, eds., W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Available at http://www.w3.org/TR/REC-CSS1/.
CSS2
  "Cascading Style Sheets, level 2," B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., W3C Recommendation 12 May 1998. Available at http://www.w3.org/TR/CSS2/.
CSS21
  "Cascading Style Sheets, level 2 revision 1," B. Bos, T. Çelik, I. Hickson, H. Wium Lie, eds., W3C Candidate Recommendation 25 February 2004. Available at: http://www.w3.org/TR/CSS21/
CSS3
  [CSS 2.1 and CSS 3] Roadmap, CSS WG's table of modules and publication dates.
HTML4
  "HTML 4.01 Specification," D. Raggett, A. Le Hors, I. Jacobs, eds., W3C Recommendation 24 December 1999. Available at http://www.w3.org/TR/html401/
WCAG20
  "Web Content Accessibility Guidelines 2.0," B. Caldwell, M. Cooper, L. Guarino Reid, and G. Vanderheiden, eds., W3C Working Draft 11 December 2007. This W3C Working Draft is available at http://www.w3.org/TR/2007/WD-WCAG20-20071211/. The latest version of WCAG 2.0 is available at http://www.w3.org/TR/WCAG20/
XHTML1
  "XHTML 1.0 The Extensible HyperText Markup Language (Second Edition)," S. Pemberton, et al., W3C Recommendation 26 January 2000, revised 1 August 2002. Available at: http://www.w3.org/TR/xhtml1/.