Accordion Expander

Button

Description Inner text describes purpose
Role Identify itself as a button
Relationships n/a
State Expresses its state as expanded or collapsed
Focus Visibly focused with tab key / swipe
Action Enter key, space / double tap

Expander Panel

Description Section can be labelled by its button
Role May identify itself as a region
Relationships n/a
State Expressed by button state
Focus Elements within should be focusable with tab
Action n/a

Keyboard & Screenreader Support

Space or Enter When focus is on the accordion header of a collapsed section, expands the section.
Tab Moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page Tab sequence
Down arrow When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
Up arrow When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home When focus is on an accordion header, moves focus to the first accordion header.
End When focus is on an accordion header, moves focus to the last accordion header.