Heading hierarchy

Issue: It’s not uncommon for people to create headings by just selecting a piece of text and making it bigger and bolder in the editing toolbar. This seems innocent enough, but it plants the seeds for a cascade of accessibility and usability problems.

Who’s affected: People who use screen readers to access the web (blind, low vision) and ask the screen reader to read all the headings on a page, people who navigate by keyboard (hand mobility issues) people with cognitive disabilities.

WCAG standard: Guideline 2.4.10: Section headings are used to organize content

What to do: Use the headings available in the text formatting tools of your editing software (Heading 1-Heading 6) to organize content on a web page in an outline-like order. Your page title will automatically be a heading 1 in our system, so identify your main topics with heading 2s and any sub-topics with heading 3s, etc.

This helps all users understand what the page contains with minimal effort. Nest headings sequentially (h3’s should be subcategories under an h2, for example) and don’t skip levels.

Recommended tool: To check the structure of a web page: WAVE Web Accessibility Evaluation Tool (structure tab). To check the structure of a Word document or Google doc, turn on the outline view. It will show all of your headings as an outline.

For example

This is one of my page’s main topics (h2)

Here’s some paragraph text about that first main topic. It might go on and on and on.

This is a sub-topic related to the first main topic (h3)

Here’s some paragraph text about that first sub-topic.

This is another subtopic related to the first main topic (h3)

Here’s some paragraph text about that next sub-topic.

This is another main topic (h2)

Here’s some paragraph text. Most of your headings will be h2 and h3. You might occasionally use h4, but probably not very much.

This is a third main topic (h2)

Here’s some paragraph text about it.