Expander accordion

How to test an expander accordion

Gherkin Condensed WCAG

Given that I am on a page with an expander accordion

1 Keyboard for mobile & desktop

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 a button or details
- 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 mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a button
- I HEAR Its purpose is clear
- I HEAR It identifies its role of a button or details
- 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	Toggles the expander.
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 for all devices

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

An expander accordion must meet these WCAG principles.

1Perceivable

Is easy to identify as interactive
Color is not used as the only means of conveying information (expanded/collapsed)

2Operable

Is keyboard operable
The click/tap target area is no smaller than 44x44px
The focus indication has a minimum area equal to the width of the element and 2px in height
The focus state has a 3:1 minimum contrast ratio between the default and focused states
The focus indication has a 3:1 minimum contrast ratio against adjacent elements

3Understandable

Its purpose is clear in the context of the whole page

4Robust

Meets criteria across platforms, devices and viewports

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.