The Accordion Component Gets a New Accessibility Feature

The latest minor release of Ashlar gives our accordion component a new accessibility feature: the ability to expand and collapse all sections at once.

Why is this important?

While the accordion block can help with certain use cases in web content, this design pattern can be more challenging for users to navigate. This is especially true if there are a lot of items to go through; users must expand items one at a time to see if that item contains the answers or content they're looking for. This experience can become more tedious and adds a lot of cognitive load.

To address these concerns, the accordion now provides the ability to show and collapse all accordion items with one button or keyboard command. 

An accordion block of 3 items with active expand and collapse all controls above it

How does it work?

Using the expand all button will open all closed accordion items on a page. Likewise, the collapse all button will collapse all expanded items on a page. Once all items are expanded or closed, the corresponding control will be set to disabled (so expand all is inactive once all items are expanded, for example).

All accordion items on the page are expanded, so the "expand all" control is disabled and not usable.

These controls are also usable by keyboard, with the following commands:

  • Shift + Enter: Expand all accordion items
  • Shift + Esc: Collapse all accordion items

Can these controls be turned off?

Currently, no—we designed this as a key accessibility and usability feature to be included by default in pages where an accordion is used.

Any questions or concerns?

You can reach us by emailing webhelp@wwu.edu.