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

Applicability

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.