Headings and Lists

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.

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 dog breeds:

  – Rhodesian Ridgeback

  – Irish Wolfhound

  – English Bulldog

This would get read by some screen readers as:

My favorite dog breeds space space hyphen Rhodesian Ridgeback space space hyphen Irish Wolfhound space space hyphen English Bulldog

If I used the proper defined unordered list tool, my list would look like this:

My favorite dog breeds:

• Rhodesian Ridgeback
• Irish Wolfhound
• English Bulldog

This would get read by the same screen reader as:

My favorite dog breeds, unordered list of three items. Item 1: Rhodesian Ridgeback, Item 2: Irish Wolfhound, Item 3: English Bulldog

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 (inspector) in a web browser. Verify 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 the 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.