Headings provide both visual and structural organization to the content. Using defined heading elements (sometimes called Semantic headings), versus taking regular text and styling it to merely look like a heading, allows assistive technologies like screen readers the ability to jump between page sections and easily identify the content most relevant to them.
Headings
Guidelines
- Content creation tools like word processors and rich text editors have defined Heading elements. Use these to organize the content, versus styling non-heading text with increased font sizes, underlining, bolding text, colors, etc.
- Headings are arranged in order of importance with heading levels. The syntax and number of heading levels varies by platform, but typically starts with <h1> as the main heading on the page, <h2> to indicate main subsections of content, down to <h6> as the lowest level heading.
- Pages must have exactly 1 <h1> heading. This is the main content on the page.
- Most content does not require 6 levels of headings.
- Do not skip heading levels. <h1> headings must be followed by <h2> headings.
- Be careful of headings that may be automatically inserted by the content template. Some web platforms may automatically add the page title as an H1 heading, for example.
Heading Hierarchy Example:
Following is an example of how a digital version of a newspaper might structure the headings on their page.
<h1>The Daily Emerald</h1>
<h2>News</h2>
<h3>Current News Item #1</h3>
<h3>Current News Item #2</h3>
<h3>Current News Item #3</h3>
<h2>Sports</h2>
<h3>Football</h3>
<h3>Basketball</h3>
<h2>Weather</h2>
<h3>Eugene</h3>
<h3>Portland</h3>
Lists and Other Structured Content
- Depending on your content editing platform, you likely have multiple other predefined types of content. This frequently includes both numbered lists (sometimes called Ordered lists) and bullet lists (sometimes called Unordered lists). It might also include elements like predefined Quotation styles, and increase/decrease indent options.
- Whenever available, use these built-in options versus using styles to emulate the same effect. This provides structural definition to the page allowing users of assistive technologies to understand the content more easily.
Example of a "fake" list:
This example demonstrates using keyboard characters and whitespace to create the visual appearance of a bullet list, without using a defined list element.
My favorite ice cream flavors:
- Salted caramel
- Pistachio
- Chocolate cherry
This would get read by some screen readers as:
My favorite ice cream flavors space space hyphen salted caramel space space hyphen pistachio space space hyphen chocolate cherry
If I used the proper defined unordered list tool, my list would look like this:
My favorite ice cream flavors:
- Salted caramel
- Pistachio
- Chocolate cherry
This would get read by the same screen reader as:
My favorite ice cream flavors, unordered list of three items. Item 1: Salted caramel, Item 2: Pistachio, Item 3: Chocolate cherry.
How to Test
Heading structure can be tested both manually and with automated testing tools. Lists and other structured content can be tested manually. Right-click or ctrl-click on a piece of structured content and open up the developer console in a web browser. Verify that that the content is indeed a heading/list/other structured element, and not generic paragraph text with added styling. If it's a heading, verify that it is nested appropriately within the heading hierarchy.
Automated testing tools like WebAIM WAVE can also check for correct heading structure. Some automated tools produce false negative results for heading hierarchy errors, so while automated tools can help you easily identify legitimate heading hierarchy errors, if the tool reports no errors, it’s still worthwhile to manually check headings on the page.