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

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.

TIP: If you’re working in Word or Google Docs, turn on “outline view” to see your document’s heading hierarchy.

Recommended tools

  • Outline view (in Word and Google Docs)
  • Accessibility Insights extension (available for Chrome & Edge). To see the heading structure on a live web page, use the “Ad hoc tools.”