Headings

Overview

Headings create important structure for a web page, allowing readers to browse content by topic. Users are much more likely to discover topics of interest if they are marked with a heading.

This structure is especially important for screen reader users. The majority of screen reader users say skimming for headings is the first thing they do when they open a page. Headings allow screen reader users to listen to a list of the headings and skip to the topic they want.

Headings also…

  • Eliminate walls of text
  • Promote readability
  • Allow for skimming
  • Save formatting (when copy and pasting)

Best Practices

  • Headings must have the appropriate style applied (not just bolded and enlarged)
  • Never skip a heading level

Applying Heading Styles

Aside from the visual style, heading level 1, heading level 2, etc. have meaning to a screen reader user.

  • Heading level 1 is the title of the website and/or page. There are usually no more than two of these styles.
  • Heading level 2 should be nested under heading level 1. Heading level 3 should be nested under heading level 2 etc. 
  • Do not skip heading levels as it will make the content's hierarchical structure confusing. 
Screenshot of headings menu on a webpage using VoiceOver.

Screen readers can pull up a list of headings on a webpage. Here is an example of the Headings Menu from VoiceOver on Mac. Each number that corresponds to a heading represents the heading style number.

Example

Think of a page's heading structure like a table of contents where each heading level is nested appropriately without skipping any levels. 

In the example screenshot, the heading levels are labeled on the webpage using Editorially so they are easier to see. The top most heading is a Heading Level 2 for, “Maintaining CPACC Certification.”

Underneath that there is a Heading Level 3 titled, “What counts as CAEC?” 

As we continue down the page, notice how the heading levels keep changing, but a heading level is never skipped as we drill down.

Having a clear and predictable structure will help improve readability for everybody, including those who use screen readers.

Screenshot showing the heading structure of a webpage.

FAQ

Testing for Accessibility

Test

Use this headings bookmarklet or automated testing tool like WAVE to discover headings on a page.

  1. Do all visually formatted headings have a semantic h-tag?
  2. Do headings nest in outline level hierarchy properly?

Resources