Expander accordion - Web accessibility testing checklist

How to test an expander accordion

Gherkin Condensed

Given that I am on a screen with an expander accordion

1 Keyboard only

WHEN I use the tab key to move focus to an expander I SEE focus is strongly visually indicated
Then when I use the spacebar and/or enter key to activate the expander I SEE the hidden content is revealed

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to an expander
- I HEAR Its purpose is clear
- I HEAR It identifies its role of button or summary
- I HEAR It expresses its state (expanded/collapsed)
Then when I use the spacebar and/or enter key to activate the expander I HEAR the hidden content is revealed

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR Its purpose is clear
- I HEAR It identifies its role of button or summary
- I HEAR It expresses its state (expanded/collapsed)
Then when I doubletap with the button in focus I HEAR the intended action occurs

1 Keyboard & screen reader actions

When I use	I see/hear
Tab	Focus visibly moves to the expander
Spacebar or enter	Toggles the expander

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element, expresses its state (expanded/collapsed)
Doubletap	Toggles the expander

3 Screenreader output

Reads	I hear
Name	Its purpose is clear
Role	It identifies its role of button or summary
State	It expresses its state (expanded/collapsed)

An expander accordion must meet WCAG principles:

1 Perceivable

Color is not used as the only means of conveying state (expanded/collapsed) - 1.4.1 A
Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
The purpose can be programmatically determined - 1.3.5 AA

2 Operable

Is keyboard operable - 2.1.1 A
The click/tap target area includes the label and is no smaller than 24x24px - 2.5.8 AA
The click/tap target area includes the label and is no smaller than 44x44px - 2.5.5 AAA
The focus indication is visible (in some way) 2.4.7 AA
The focus indication has a 3:1 minimum contrast ratio against default and adjacent elements - 2.4.13 AAA
The focus indication has a minimum area equal to the width of the element and 2px in height - 2.4.13 AAA

4 Robust

Conveys the correct name, role, state - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

MacOS Voiceover Safari

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default with no scripting required.
It uses CSS pseudo attributes to create the expanded/collapsed indicator, no Javascript.

<details>
  <summary>
    About the NATO alphabet
  </summary>
  The (International) Radiotelephony Spelling Alphabet, 
  commonly known as the NATO phonetic alphabet, 
  is the most widely used set of clear code words 
  for communicating the letters of the Roman alphabet.
</details>

About the NATO alphabet

The (International) Radiotelephony Spelling Alphabet, commonly known as the NATO phonetic alphabet, is the most widely used set of clear code words for communicating the letters of the Roman alphabet.

Use semantic HTML where possible

This custom expander uses a semantic button with aria-expanded with additional scripting to toggle content and states.

<div class="expander-group">
  <button class="expander-toggle" aria-expanded="false">
    About the NATO alphabet
  </button>
  <div class="expander-content">
    The (International) Radiotelephony Spelling Alphabet, 
    commonly known as the NATO phonetic alphabet, 
    is the most widely used set of clear code words 
    for communicating the letters of the Roman alphabet.
  </div>
</div>

Developer notes

Name

Inner text must describe the purpose

Role

<details> identifies as details
Native button identifies as button by default
Use role="button" for custom elements

Group

You can use aria-controls="popupId", but it is not well supported

State

Menus or expanders use aria-expanded="true/false"

Focus

Focus must be visible

Design notes

Nielsen Norman Group study: The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.
Not all users will notice there is hidden content or understand how these work. For this reason, you should only use them in specific situations and if user research supports it.

Web Expander accordion