Expander accordion

How to test an expander accordion

Gherkin Condensed

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 only & screenreader

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)

Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

MacOS Voiceover Safari

Code examples

Use semantic HTML

This semantic HTML contains all accessibility features by default with no scripting required.

<details>
  <summary>
    More info
  </summary>
  This semantic element covers all success
  criteria with no additional scripting.
</details>

More info

This semantic element covers all success criteria with no additional scripting.

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">
    More info
  </button>
  <div class="expander-content">
    This button requires aria attributes
    and additional scripting.
  </div>
</div>

This button requires aria attributes and additional scripting.

Developer notes

Name

Inner text should 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