Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

H42: Using h1-h6 to identify headings

Applicability

HTML and XHTML

This technique relates to:

Description

The objective of this technique is to use HTML and XHTML heading markup to convey the structure of the content. Heading markup can be used to:

In HTML and XHTML, heading markup is designed to convey logical hierarchy, and heading elements include numbers (h1 through h6). 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. Cascading Style Sheets (CSS) can be used to change the way headings look or sound.

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.

Using headings merely to change the appearance of text does not convey the organization of the content, and may confuse users who use headings to perceive structure or rely on them for navigation. Conversely, while applying bold format, or even "class=heading", can result in the visual display of a heading, assistive technologies will not recognize such text as headings.

Examples

Example 1: 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 2: Headings show the organization of material within the main content

Note that in HTML and XHTML 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>

Example 3: Headings in a 3-column layout

In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

Example Code:

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

  1. Check that heading markup is used when content is a heading.

  2. Check that heading markup is not used when content is not a heading.

Expected Results