Headings
Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.
Headings are used to add structure to content. They should describe the following part of the content that is provided. On the web, they can fulfill two different roles: Structuring the text in the main content section and labeling the various components of the page.
Screen readers provide mechanisms to present a list of headings to the user that allows jumping to those individual headings. Headings also provide visual clues that help to skim the page or find a specific section, especially when the user was distracted.
Heading levels
It is good practice to nest headings properly. Jumping headings should be avoided. hat means that an <h1>
is followed by an <h1>
(rarely) or <h2>
, an <h2>
is followed by a <h2>
or <h3>
etc.
Note: HTML5 has introduced an outline algorithm that assigns heading levels based on how deep sectioning elements are nested inside each other, regardless of the actual heading level. At the time of writing, this is not supported by any browser or assistive technology and should not be used.
Organize main page content
When looking at the content, the highest available heading level should be used to mark up the heading of the main content, as this makes it easy to discover. Ideally a <h1>
or <h2>
element is used.
Organize page sections
Similar to landmarks, headings can be used to give users a way of navigating through web pages. To do this, each section of the page (for example navigation) has its own heading, describing what can be found in the section. Often the heading levels are similar to this example:
The first heading in such cases is usually the page name, the heading of the actual content is hard to find between headings that describe the page structure. If possible, labeled landmarks are much more convenient to mark up the structure of the page.
Related WCAG2.0 resources
Success Criteria:
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
2.4.10 Section Headings: Section headings are used to organize the content. (Level AAA)
Techniques:
- ARIA12: Using role=heading to identify headings
- G130: Providing descriptive headings
- G141: Organizing a page using headings
- H42: Using h1-h6 to identify headings
- H69: Providing heading elements at the beginning of each section of content
- H80: Identifying the purpose of a link using link text combined with the preceding heading element
- PDF9: Providing headings by marking content with heading tags in PDF documents