Accessible Headings

Understanding Accessible Headings

Accessible headings organize webpage content into a meaningful structure that helps visitors understand and navigate the page.

HTML provides six heading levels, from <h1> through <h6>. Choosing heading levels according to the structure of the content rather than their visual appearance creates a document that is easier to scan visually and navigate with assistive technology.

Why Headings Matter

Headings divide content into recognizable topics and sections. A visitor can scan headings to understand what information is available and locate the part of the page that interests them.

For people using screen readers, headings can provide an important navigation system. Many screen readers allow users to move from heading to heading or display a list of headings so they can understand the organization of a page without reading every line from the beginning.

HTML Heading Levels

HTML provides six heading levels. The level indicates the heading's position within the document hierarchy rather than its desired font size.

Most pages do not need all six levels. Use only the levels required to accurately describe the organization of the content.

Create a Logical Heading Hierarchy

Heading levels should reflect how sections relate to one another. A subsection should use a heading level below the heading that introduces its parent section.

<h1>Gardening Guide</h1>

<h2>Vegetable Gardening</h2>

<h3>Choosing Vegetables</h3>

<h3>Preparing the Soil</h3>

<h2>Flower Gardening</h2>

<h3>Choosing Flowers</h3>

In this example, Vegetable Gardening and Flower Gardening are major topics beneath the page heading. Their individual topics are represented by <h3> headings.

Avoid Unnecessary Heading-Level Jumps

Heading levels should generally progress according to the content hierarchy. For example, jumping directly from an <h2> to an <h4> can suggest that a heading level is missing.

<h2>Garden Supplies</h2>
<h3>Hand Tools</h3>
<h4>Pruning Tools</h4>

The important goal is not simply numerical order. The heading levels should accurately communicate the relationship between sections and subsections.

Headings and Screen Reader Navigation

Screen readers can identify HTML heading elements and provide ways to navigate between them. This allows a user to quickly locate sections without listening to all preceding content.

A meaningful heading structure can therefore act much like a table of contents. Descriptive headings such as Shipping Options or Account Settings communicate more useful information than vague headings such as More or Information.

Heading text should clearly identify the content that follows it and make sense when encountered while navigating through the page.

Do Not Use Headings for Style

Do not choose a heading element simply because its browser default happens to produce the desired font size or weight. Heading levels communicate document structure, while CSS controls presentation.

If an <h2> is structurally correct but should appear smaller, keep the <h2> and style it with CSS rather than changing it to an <h4>.

<h2 class="section-heading">Garden Supplies</h2>

The HTML preserves the correct heading level while CSS can independently control its appearance.

Do Not Fake Headings

Making ordinary text large and bold does not turn it into an HTML heading. Visual styling may make the text look like a heading, but assistive technologies still encounter the underlying element.

This text is visually styled but has no heading semantics:

<div class="heading">Garden Supplies</div>

If the text introduces a section, use a real heading element:

<h2>Garden Supplies</h2>

CSS can then make the semantic heading look however the design requires.

Accessible Heading Example

The following example demonstrates a simple page with a clear heading hierarchy.

<main>
  <h1>Home Gardening</h1>
  <p>Learn the basics of growing plants at home.</p>

  <section>
    <h2>Vegetable Gardening</h2>
    <p>Grow fresh vegetables in your garden.</p>

    <h3>Choosing Vegetables</h3>
    <p>Choose vegetables suited to your climate.</p>

    <h3>Preparing the Soil</h3>
    <p>Healthy soil gives plants a strong start.</p>
  </section>

  <section>
    <h2>Flower Gardening</h2>
    <p>Add color to your garden with flowering plants.</p>
  </section>
</main>

Try changing the heading levels in the editor and consider whether the resulting structure still represents the relationships between the topics correctly.

Best Practices

• Use headings to describe the organization of the content, not simply to make text larger or bolder.
• Use an <h1> for the primary heading of the page.
• Choose subsequent heading levels according to the relationship between sections and subsections.
• Avoid unnecessary jumps in heading levels that can make the document hierarchy harder to understand.
• Write descriptive heading text that clearly identifies the content that follows.
• Use CSS to control the visual size, weight, color, and spacing of headings.
• Do not replace semantic heading elements with styled <div> or <span> elements.
• Review the page's headings as an outline to make sure the overall structure makes sense.

Summary

Accessible headings provide a meaningful outline of webpage content. The six HTML heading levels describe the relationship between the page's main topic, major sections, and their subsections.

A logical heading hierarchy benefits visual scanning and assistive technology navigation. Use heading elements for structure, CSS for appearance, and descriptive heading text that clearly communicates the purpose of each section.