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
When when I use the tab key I SEE nothing happens to the heading because headings must NOT be focusable

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 must 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
When when I use the tab key I HEAR nothing happens to the heading because headings must NOT be focusable

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to browse to a heading
- I HEAR The heading's purpose and level must 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 & screen reader actions

When I use	I see/hear
Tab	Nothing, headings must 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 must 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>
  <!-- Author's entire life story 
   as it relates to tacos -->

  <h2>Ingredients</h2>
  <!-- List of ingredients -->

  <h2>Steps</h2>

    <h3>Preparing the protein</h3>
    <!-- List of instructions -->

    <h3>Preparing the vegetables</h3>
    <!-- List of instructions -->
    
    <h3>Assembly and plating</h3>
    <!-- List of instructions -->
  
  <h2>Nutrition information</h2>
  <!-- List of nutrition info -->
  
  <h2>Related receipes</h2>
  <!-- List of related recipes -->

Complex headings

When multiple styles exist inside a heading use spans and css to achieve the desired result.
Do not use multiple headings.

<h1>
  <span class="brand">Apple</span> 
  <span class="model">iPhone XVI</span> 
</h1>

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 must 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 must not receive focus
Arrow keys will browse headings (not the tab key)