Techniques for WCAG 2.0

On this page:

-

# H42: Using h1-h6 to identify headings

## Applicability

HTML and XHTML

This technique 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 use HTML and XHTML heading markup to convey the structure of the content.

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

- HTML 4.01 H1-H6 elements

- Pick a Heading Eric Meyer

- Quick tips for accessible headings

## Related Techniques

- H69: Providing heading elements at the beginning of each section of content
- G141: Organizing a page using headings

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

- Checks #1 and #2 are true.

- Top
- Contents
- Intro
- Previous: Technique H40
- Next: Technique H43