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>HTML Learning Guide</h1>

<h2>HTML Fundamentals</h2>

<h3>Writing HTML</h3>

<h3>Preparing the Soil</h3>

<h2>CSS Fundamentals</h2>

<h3>Writing CSS</h3>

In this example, HTML Fundamentals and CSS Fundamentals 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>Web Design Resources</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">Web Design Resources</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">Web Design Resources</div>

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

<h2>Web Design Resources</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>Learning HTML</h1>
  <p>Learn the basics of creating accessible web pages.</p>

  <section>
    <h2>HTML Fundamentals</h2>
    <p>Create well-structured pages with semantic HTML.</p>

    <h3>Writing HTML</h3>
    <p>Choose HTML elements that describe your content.</p>

    <h3>Preparing the Soil</h3>
    <p>Clear document structure gives pages a strong foundation.</p>
  </section>

  <section>
    <h2>CSS Fundamentals</h2>
    <p>Use CSS to control colors, spacing, and typography.</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.