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

ID: F2

Technology: failures

Type: Failure

## When to Use

All technologies that support images or presentation markup.

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

### 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 Assistive Technology could not distinguish it as a heading.

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

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

### 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 to eliminate the image and to enclose the text within a header element which has been styled using CSS.

    <img src="Chapter1.gif" alt="Chapter One">
    <p>Once upon a time in the land of the Web...</p>

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

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

And here is the corresponding HTML:

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

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

## Related Techniques

- H42
- H49
- G115
- G117

## Resources