Technique 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

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

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

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:

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