Summary
The use of heading tags ensures users do not have to rely on visual styling to understand and navigate the document outline.
Techniques
-
Ensure all headings are identified. [[WCAG-1.3.1]]
-
Use one heading per section to establish the document outline. [[WCAG-2.4.10]]
-
Check that headings describe their sections. [[WCAG-2.4.6]]
Examples
The heading number is decreased by one to match each subsection (h1, h2, h3).
<section role="doc-part" aria-labelledby="hd01">
<h1 id="hd01">Book One: 1805</h1>
<section role="doc-part" aria-labelledby="hd02">
<h2 id="hd02">Part 1</h2>
<section role="doc-chapter" aria-labelledby="hd03">
<h3 id="hd03">Chapter 1</h3>
The title and subtitle are contained in separate elements, but grouped in a header
element to better associate them. The role doc-subtitle
is used to identify the
subtitle.
<section role="doc-chapter" aria-labelledby="hd01">
<header id="hd01">
<h1>ORIGIN OF THE WORLD.—FIRST DYNASTY.</h1>
<p role="doc-subtitle">URANUS AND GÆA. (Cœlus and Terra.)</p>
</header>
The subtitle is contained within the same heading element as the title, but is identified
in a span
with the role of doc-subtitle
.
<section role="doc-chapter" aria-labelledby="hd01">
<h1 id="hd01">ORIGIN OF THE WORLD.—FIRST DYNASTY.
<span role="doc-subtitle">URANUS AND GÆA. (Cœlus and Terra.)</span></h1>
The aria-label
attribute provides a meaningful title for a section
that does not contain a visual heading.
<section role="region" aria-label="preamble">
Frequently Asked Questions
- Can I use an
h1
heading for every section? User agents and assistive technologies do not support the outline algorithm defined in HTML5. If you use an
h1
heading for every section, they will all appear as top-level headings to assistive technologies, impeding users' ability to navigate the content.- Should heading levels be sequential?
Headings should reflect the hierarchy of the publication, so an
h2
should always be used for secondary level headings,h3
for tertiary, and so on. Avoid gaps in numbering whenever possible (e.g., usingh3
for headings below anh1
).Using consistent numbering ensures that users are not confused by the structure of a publication. Assistive technologies provide shortcut keys that allow users to move through the content effectively by heading number, for example. If there are gaps in the numbering, users may not realize there are subsections depending on how they try to navigate (i.e., trying to navigate to a specific heading level will not work; only the generic move to next heading option will).
Explanation
Headings are one of the primary means of navigation for users of assistive technologies.
Each section
should have a numbered heading (e.g., h1
) that reflects its level
in the document hierarchy, as numbered headings allow assistive technologies to navigate the document structure.
Each heading element must represent a single heading. Do not break a heading up into separate tags for
visual formatting. If you need to include subheadings, incorporate them into the main heading or include
them in a subsequent paragraph, using a header
tag to encapsulate the full heading.
If a section of text does not have a heading, include a heading in an aria-label
attribute on
the enclosing element. Assistive technologies will announce this label and alert users that a new section
is starting.
Note
Do not use heading elements within figure
, blockquote
and other HTML5
sectioning root elements. Although these features may have titles, using heading elements will force
users to navigate through them to find the next section.
Related Links
- MDN — <h1>–<h6>: The HTML Section Heading elements
- HTML — The
h1
,h2
,h3
,h4
,h5
, andh6
elements - WCAG — Using h1-h6 to identify headings
- WCAG — Providing heading elements at the beginning of each section of content
- WCAG — Organizing a page using headings
- WCAG — HTML — Headings and sections
- WCAG — HTML — Subheadings, subtitles, alternative titles and taglines
- WCAG — Providing descriptive headings