Feedback has identified a user need for accordions to include an optional Expand all / Collapse all function. We would like to share our insights below and encourage everyone to share your feedback, research and insights into the proposed update.
- Users with fine motor skill difficulties may have trouble expanding and collapsing multiple accordions
- Users wishing to view content in multiple accordions and therefore expand more than are left collapsed, ie. a step by step processes.
- Allow users to collapse all accordions in one action instead of individually, to easily scroll down to information below
This should not be used to help users locate information within accordions. If a user is expanding multiple accordions because they are unsure of the content they contain, consider more descriptive titles or removing accordions all together and displaying the content separated by headings.
Addition of optional “Expand all” and “Collapse all” actions that can be added to the top right of the current accordion component.
Having the two separate actions allow for a user to perform their required action in one click when accordions are in both states. Two actions have been chosen over one, as displaying only one action could cause uncertainty or result in two clicks to achieve desired action.
Using the terminology Expand all / Collapse all:
- Is widely used by screen reader technology
- Describes the exact action occurring
- Avoids terms that also refer to other interactions which can be confusing for users, ie Open and close.
“Expand all” would expand all accordions that are in the collapsed state, and “Collapse all” would collapse all accordions that are in the expanded state. When an action would not change the state of any accordions, that option will be displayed as a disabled link. Ie. “Collapse all” would be disabled on page load when all accordions are already collapsed. This clearly indicates and lets the user select only the available action.
These awesome collaborators have contributed insights, knowledge, and time to the information above: