Headings and Titles - Optimal Content Examples

Table Of Contents

Introduction

A heading is a short text phrase which is the title for a section of content that immediately follows it. Headings are usually represented visually as enlarged bolded text and are often hierarchical in nature.

The page title is a short text phrase which identifies the contents of the web page.

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criteria related to this topic. Additional WCAG 2.0 success criteria, techniques, and failures not listed here may also be applicable depending on the content.

1. Heading Markup

Related to Success Criteria:

When content is identified as being a heading, it must be marked up with the <h1>-<h6> elements.

When content is identified as NOT being a heading, it must NOT be marked up with the <h1>-<h6> elements.

Source: WCAG 2.0, Technique H42

Attention: When an item has the meaning of a heading, it is insufficient to mark it up with only the <strong> element. Use the <h1>-<h6> elements.

Note: It is strongly recommended to not skip heading levels and to start from level <h1>.

2. Descriptive Headings

Related to Success Criteria:

Headings must identify its section of the content. A heading does not need to be lengthy. A word, of even a single character, may suffice if it provides an appropriate cue to finding and navigating content.

Source: WCAG 2.0, Technique G130

3. Descriptive Page Titles

Related to Success Criteria:

Every web page requires a page title marked up using the <title> element. The page title does not need to be unique but it does need to be sufficiently descriptive to identify the contents of the web page among a group of web pages.

Source: WCAG 2.0, Technique G88 and WCAG 2.0, Technique H25

Web Accessibility Considerations

Cognitive Impairments

  • Separate information so it is logically ordered, organized, and consistent. A properly formatted document gives users quick access, and a thorough understanding. This enhances everyone's user experience, not just those with cognitive impairments.

Visual Impairments

  • Screen readers allow users to jump from heading to heading, as well as navigate between different levels of heading elements. Web pages that are properly structured with <h1> to <h6> headings are much easier to navigate by screen readers.