Techniques for WCAG 2.0

On this page:

-

# F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content

## Applicability

HTML and XHTML

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

The objective of this technique is to describe a failure that occurs when structural markup is used to achieve a presentational effect, but indicates relationships that do not exist in the content. This is disorienting to users who are depending on those relationships to navigate the content or to understand the relationship of one piece of the content to another. Note that the use of HTML tables for layout is not an example of this failure as long as the layout table does not include improper structural markup such as `<th>` or `<caption>` elements.

## Examples

### Failure Example 1: A heading used only for visual effect

In this example, a heading element is used to display an address in a large, bold font. The address does not identify a new section of the document, however, so it should not be marked as a heading.

Example Code:

    <p>Interested in learning more? Write to us at</p>
    <h4>3333 Third Avenue, Suite 300 · New York City</h4>

    <p>And we'll send you the complete informational packet absolutely Free!</p>

### Failure Example 2: Using heading elements for presentational effect

In this example, heading markup is used in two different ways: to convey document structure and to create visual effects. The `h1` and `h2` elements are used appropriately to mark the beginning of the document as a whole and the beginning of the abstract. However, the `h3` and `h4` elements between the title and the abstract are used only for visual effect — to control the fonts used to display the authors' names and the date.

Example Code:

    <h1>Study on the Use of Heading  Elements in Web Pages</h1>
    <h3>Joe Jones and Mary Smith<h3>
    <h4>March 14, 2006</h4>
    <h2>Abstract</h2>
    <p>A study was conducted in early 2006 ...
    </p>

### Failure Example 3: Using blockquote elements to provide additional indentation

The following example uses `blockquote` for text that is not a quotation to give it prominence by indenting it when displayed in graphical browsers.

Example Code:

    <p>After extensive study of the company Web site, the task force
    identified the following common problem.</p>

    <blockquote>
    <p>The use of markup for presentational effects made Web
    pages confusing to screen reader users.</p>
    </blockquote>

    <p>The committee lists particular examples of the problems
    introduced by this practice below.</p>

### Failure Example 4: Using the fieldset and legend elements to give a border to text

Example Code:

    <fieldset>
    <legend>Bargain Corner</legend>
    <p>Buy today, and save 20%</p>
    </fieldset>

## Resources

No resources available for this technique.

## Related Techniques

- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G115: Using semantic elements to mark up structure
- H39: Using caption elements to associate data table captions with data tables
- H42: Using h1-h6 to identify headings
- H73: Using the summary attribute of the table element to give an overview of data tables

## Tests

### Procedure

1. Check that each element's semantic meaning is appropriate for the content of the element.

### Expected Results

- If check #1 is false, then this failure condition applies and the content fails the Success Criterion.

- Top
- Contents
- Intro
- Previous: Failure F42
- Next: Failure F44