Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

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

Applicability

HTML and XHTML

This technique relates to:

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 demonstrate how using the heading elements, h1 - h6, to markup the beginning of each section in the content can assist in navigation. Most assistive technologies and many user agents provide a mechanism to navigate by heading elements by providing keyboard commands that allow users to jump from one heading to the next. Using heading elements to markup sections of a document allows users to easily navigate from section to section.

Examples

Example 1

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

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

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For all content which is divided into separate sections,

  1. Check that each section is marked with one of the elements h1-h6.

Expected Results