An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.
Each header controls it’s associated content. The header also will have a control that can show / hide or expand / collapse the associated section.
Accordions as mentioned can show or hide the content which reduces the need for scrolling the page when multiple sections are on the page. Accordions can either be multi-expandable or single expandable.
Keyboard Navigation
| Action | Keyboard command |
| To expand or collapse the content section. | Enter / return or space |
| Tab | Move to the next actionable control in the accordion. |
| Shift + tab | Moves to the previous actionable control in the accordion. |
Note1: To expand or collapse the accordion the focus must be on the accordion header.
Note 2: The actionable controls of the accordion will have to follow the natural page tab sequence.
ARIA Roles, States & Properties
| ARIA Attribute | Allowed values | Explanation |
| Aria-expanded | True or false | Applies to all accordion headers. Announces if the accordion item is currently expanded or collapsed |
| Aria-controls | Id value | Forms a relation between the accordion header and its content section. Call in the accordion header matching the id value of the corresponding content section. |
| Aria-labelledby | Id value | The attribute to provide the label of the content section. Instead of specifying a different label, the content of the corresponding header can be called with Id reference. |
| Aria-disabled | True or false | Only required for single select accordions. The aria-disabled attribute must be supplied through script |
| Role=”button” | In case a native button cannot be provided for the accordion header items, this role can be used instead. |
HTML sample
<div>
<h3>
<button aria-expanded=”true” aria-controls=”panel-1″ id=”header-1″>Accordion header One</button>
</h3>
<div role=”region” aria-labelledby=”header-1″ id=”panel-1″>
Panel one content goes here
</div>
</div>
JavaScript Requirements
Though initial values of aria-expanded is set, the toggle depends on user interaction. Depending on the user interaction the aria-expanded value must be changed using script.
As accordions can be single selection or multi selection, content must be managed accordingly and aria-expanded must be managed accordingly. Eg: For single selection only expanding is possible by user, the collapse automatically happens when the user activates any other header of the accordion. This means triggering of aria-expanded to false depends on user interaction i.e. expansion of any other accordion item. This need to be handled by javascript.
Since collapsing is not possible in case of single selection accordion, aria-disabled attribute or HTML disabled attribute need to be set to true when aria-expanded is set to true.
Testing an Accordion
Keyboard
- Using tab and shift tab navigate through all the actionable controls Eg: Accordion headers.
- Using space or enter / return keys the accordion panels must be visible when they are hidden and vice versa.
- In case of single selection accordion, check if the currently selected header is not keyboard operable and cannot be collapsed using a keyboard.
Using Screen reader
Repeat the steps from keyboard section when screen reader is switched on. In addition check for the following.
- Are the accordion headers have a role assigned? A button with hierarchical level of heading is the practice.
- Are the accordion headers announcing the current state? E.g.: Expanded or collapsed
- Are the accordion headers when expanded also announcing the disabled state in case of single expandable accordions?
Manual Check
- Check if all the interactive controls show a clear indicator when focused with keyboard?
- Check if any visual indication is provided for accordion headers to identify that they can be expanded or collapsed? E.g. Plus (+) and Minus (-), Up and down chevrons.
- Remember color should not be the only way of identifying the action associated with accordion headers.
- Check if a clear focus indicator is provided for the header and its associated icon when keyboard receives focus on the accordion header.
- Check if the currently focused accordion header is clearly differentiated from rest of the headers perhaps with a change in background color.