Techniques for WCAG 2.0

On this page:

-

# H69: Providing heading elements at the beginning of each section of content

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 2.4.1 (Bypass Blocks)
  - How to Meet 2.4.1 (Bypass Blocks)
  - Understanding Success Criterion 2.4.1 (Bypass Blocks)

## User Agent and Assistive Technology Support Notes

JAWS and WindowEyes all provide navigation via headings and provide information about the level of the heading. The Opera browser provides a mechanism to navigate by headings. Additional plugins support navigation by headings in other user agents.

## Description

The objective of this technique is to use section headings to convey the structure of the content. Heading markup can be used:

- to indicate start of main content

- to mark up section headings within the main content area

- to demarcate different navigational sections like top or main navigation, left or secondary navigation and footer navigation

- to markup images (containing text) which have the appearance of headings visually.

In some technologies, headings are designed to convey logical hierarchy. Skipping levels in the sequence of headings may create the impression that the structure of the document has not been properly thought through or that specific headings have been chosen for their visual rendering rather than their meaning. Authors are encouraged to nest headings hierarchically.

Since headings indicate the start of important sections of content, it is possible for users with assistive technology to jump directly to the appropriate heading and begin reading the content. This significantly speeds interaction for users who would otherwise access the content slowly.

In technologies that support Cascading Style Sheets (CSS), styling can be used to change the way headings look or sound. It is even possible to style headings using CSS so that they are exposed to assistive technology but are hidden from view visually. However, showing the headings visually benefits a wider set of users, including those with some cognitive disabilities.

## Examples

### Example 1

This example organizes the sections of a search page by marking each section heading using `h2` elements.

Example Code:

    <h1>Search Technical Periodicals</h1>
     <h2>Search</h2>
     <form action="search.php">
      <p><label for="searchInput">Enter search topic: </label>
      <input type="text" size="30" id="searchInput">
      <input type="submit" value="Go"></p>
     </form>
     <h2>Available Periodicals</h2>
     <div class="jlinks">
      <a href="pcoder.com">Professional Coder</a> |
      <a href="algo.com">Algorithms</a> |
      <a href="jse.com">Journal of Software Engineering</a>
     </div>
     <h2>Search Results</h2>
     ... search results are returned in this section ...

### Example 2: Headings show the overall organization of the content

In this example, heading markup is used to make the navigation and main content sections perceivable.

Example Code:

    <!-- Logo, banner graphic, search form, etc.  -->
      <h2>Navigation</h2>
        <ul>
          <li><a href="about.htm">About us</a></li>
          <li><a href="contact.htm">Contact us</a></li>
           ...
        </ul>
      <h2>All about headings</h2>
       <!-- Text, images, other material making up the main content... -->

### Example 3: Headings show the organization of material within the main content

Note that in HTML 4.01 and XHTML 1.x, heading elements only mark the beginning of sections; they do not contain them as element content.

Example Code:

     <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Cooking techniques</title>
      </head>
      <body>
        <h1>Cooking techniques</h1>
        <p>
          ... some text here ...
        </p>
        <h2>Cooking with oil</h2>
        <p>
            ... text of the section ...
        </p>
        <h2>Cooking with butter</h2>
        <p>
            ... text of the section ...
        </p>
      </body>
    </html>

## Resources

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 H1-H6 elements

- Pick a Heading Eric Meyer

- Quick tips for accessible headings

## Related Techniques

- H42: Using h1-h6 to identify headings

## Tests

### Procedure

For all content which is divided into separate sections,

1. Check that each section starts with a heading.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique H67
- Next: Technique H70