Skip to Content (Press Enter)

This document is a draft, and is designed to show changes from a previous version. It is presently showing added text,changed text,deleted text,[start]/[end] markers,and Issue Numbers.

Hide All Edits   |   Toggle Deletions  |   Toggle Issue Numbers   |   Toggle [start]/[end] Markers   |   Show All Edits

Changes are displayed as follows:

F64: Failure of SC 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.

This failure relates to:

Description

Editorial Note: This failure was combined with F2.

The objective of this technique is to describe how using text shown with a presentation that gives that text special meaning without also including the semantic markup is a failure. This includes text within the HTML or text within images.

Examples

Failure Example 1: Text styled with increased font size and weight used as headings

This is a failure because the text is styled to look like a header but is just a styled div element. A better solution would be to use a header element and style it as desired using CSS.

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

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

Failure Example 2: Images of text used as Headers 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.

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

Failure Example 3: The p element styled as a heading

This is a failure for similar reason to Example 1. The text is styled to look like a header but is just a styled p element. A better solution would be to use a header element and style is as desired using CSS.

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

Tests

Procedure

  1. Find any images of text on the page and any styled text which conveys information.

    1. Check that the images of text are not used to convey information which should be conveyed using markup.

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

Expected Results