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
3
Understandable
Expanded/collapsed indicator is in visual proximity to label - 3.3.2 A
4
Robust
Name, role, state is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA
An
expander accordion
must work for people with disabilities:
✓ Low vision
Text has a 4.5:1 minimum contrast ratio - 1.4.3 AA
Text can resize up to 200% with no loss of information - 1.4.4 AA
Expanded/collapsed indicator is in visual proximity to label - 3.3.2 A
✓ Color perception
Color is not used as the only means of conveying state (expanded/collapsed) - 1.4.1 A
✓ Motor
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
✓ Blindness
Name, role, state is documented 4.1.2 A
Conveys the correct name, role, state 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA
Usage
Expanders hide content from people by default, limiting its consumption
Use these components to expand accessory content
What to avoid
Do not place mission critical information inside an expander
Do not use these for FAQs… in fact, just don’t use FAQs
If you have FAQs, stop. Rewrite your content to explain features in context, rather than expecting people to read questions you hope they’ll ask in some other context
Avoid accordion style expanders that collapse when another expander is open (this entry uses “accordion” because some people call them that)
Working example
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.
Further reading
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.
Proximity Principle in Visual Design: Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups.
Annotations for expanders
Most of the time, your developers will be pulling from a code library with well defined expanders, so it’s not really necessary to annotate if it’s well documented
If you are creating new expanders for a design system:
<details> for the expander container
<summary> for the title
Note that any expanded/collapsed icons are decorative