Expander accordion

How to test an expander accordion

Gherkin Condensed Design

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 design principles.

1Perceivable

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

2Operable

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 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.
It uses CSS pseudo attributes to create the expanded/collapsed indicator, no Javascript.

<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 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