Techniques for WCAG 2.0

On this page:

-

# F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text

## Applicability

All technologies that support images or presentation markup.

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

## Description

This document describes a failure that occurs when a change in the appearance of text conveys meaning without using appropriate semantic markup. This failure also applies to images of text that are not enclosed in the appropriate semantic markup.

## Examples

### Failure Example 1: Using CSS to style the p element to look like a heading

The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assisitive Technology could not distinguish it as a heading.

Example Code:

     <style type="text/css">
     .heading1{
            font-family: Times, serif;
            font-size:200%;
            font-weight:bold;
     }
     </style>

     <p class="heading1">Introduction</p>
     <p>This introduction provides detailed information about how to use this
     ........
     </p>

Note: In this case, the proper approach would be to use CSS to style the `H1` element in HTML.

### Failure Example 2: Images of text used as headings where the images are not marked up with heading tags

Chapter1.gif is an image of the words, "Chapter One" in a Garamond font sized at 20 pixels. This is a failure because at a minimum the img element should be enclosed within a header element. A better solution would be eliminate the image and to enclose the text within a header element which has been styled using CSS.

Example Code:

    <img src="Chapter1.gif" alt="Chapter One">

    <p>Once upon a time in the land of the Web.....
    </p>

### Failure Example 3: Using CSS to visually emphasize a phrase or word without conveying that emphasis semantically

The following example fails because the information conveyed by using the CSS `font-weight` property to change to a bold font is not conveyed through semantic markup or stated explicitly in the text.

Here is a CSS class to specify bold:

Example Code:

    .yell {
      font-weight:bold;
      text-transform: uppercase;
    }

And here is the corresponding HTML:

Example Code:

    <p>
     "I said, <span class="yell">no</span>, not before dinner!",
     was the exasperated response when Timmy asked his mother for the
     fourth time for an ice cream cone.
     </p>

## Resources

No resources available for this technique.

## Related Techniques

- H42: Using h1-h6 to identify headings
- H49: Using semantic markup to mark emphasized or special text
- G115: Using semantic elements to mark up structure
- G117: Using text to convey information that is conveyed by variations in presentation of text

## Tests

### Procedure

1. For images of text:

   1. Check if any images of text are used to convey structural information of the document.

   2. Check that the proper semantic structure (e.g., HTML headings) is used with the text to convey the information.

2. For styled text that conveys information:

   1. Check if there is any styled text that conveys structural information.

   2. Check that in addition to styling, the proper semantic structure is used with the text to convey the information.

### Expected Results

- If check #1.1 is true, then #1.2 is true.

- If check #2.1 is true, then #2.2 is true.

- Top
- Contents
- Intro
- Previous: Failure F1
- Next: Failure F3