Heading: h1, h2, h3

How to test a heading: h1, h2, h3

Gherkin Condensed

Given that I am on a page with a heading: h1, h2, h3

1 Keyboard for mobile & desktop

WHEN I use the arrow key to browse to a heading I SEE the heading comes into view

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow key to browse to a heading
- I HEAR The heading's purpose and level should be clear
- I HEAR It identifies itself as a heading and its level
- I HEAR It is logically ordered, starting with a single h1, sections titled by h2, and subsections with h3

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a heading
- I HEAR The heading's purpose and level should be clear
- I HEAR It identifies itself as a heading and its level
- I HEAR It is logically ordered, starting with a single h1, sections titled by h2, and subsections with h3

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Nothing, headings should not be focusable
Arrow-keys	Browses headings (when using screen reader)

2 Mobile screenreader gestures

When I use	I hear
Swipe	The screenreader reads the heading and its level

3 Screenreader output for all devices

Reads	I hear
Name	The heading's purpose and level should be clear
Role	It identifies itself as a heading and its level
Group	It is logically ordered, starting with a single h1, sections titled by h2, and subsections with h3

Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Headings are not focusable with the tab key

When people use a screen reader, the arrow keys are used to browse non-focusable content
The tab key only focuses interactive elements (ex: buttons, links or inputs)

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default.

<h1>My favorite taco recipe</h1>
  <h2>Ingredients</h2>
  
  <h2>Steps</h2>

    <h3>Preparing the protein</h3>
    <h3>Preparing the vegetables</h3>
    <h3>Assembly and plating</h3>
  
  <h2>Nutrition information</h2>
  
  <h2>Related receipes`</h2>

When you can’t use semantic HTML

This custom header requires extra attributes.

<div role="heading" aria-level="1">
  About our company
</div>

Developer notes

Name

Inner text describes the heading

Role

Semantic headings <h1> <h2> <h3> identify themselves as headings and express the level
Use role="heading" aria-level="1" to for custom elements

Group

Headings should be logically ordered.
Start with a single <h1> per page.
- Title major sections with <h2>
  - Subsections with <h3>
    - It should be rare that <h4> and beyond is required.

Focus

Headings should not receive focus
Arrow keys will browse headings (not the tab key)