Accordion

This prototype contains three different implementations of the ONS Accordion component for comparison.

1. current implementation
2. “simple” variant (no button)
3. revised implementation (April 2022)

1. Current accordion implementation

We believe the following factors of the current implementation may cause issues:

• the accordion title is interactive, style like a link, has button-type behaviour, but does not use either the HTML anchor or button element
• although the accordion title is interactive, only it’s show/hide button is part of the tab order
• the accordion title is styled the same as hyperlinks, so some users may expect a new page to open

2. “Simple” variant accordion implementation

We have developed the current accordion to create a simplified variant for use in cases where there isn’t room for the show/hide buttons, such as filters.

3. Revised accordion implementation (April 2022)

To address the accessibility concerns discovered by the design system team at GDS  , the following changes have been made to the revised implementation:

• removed underline to avoid looking like a link to another page
• replaced div elements with the HTML5 Details Disclosure element to improve semantics
• removed the show/hide button from each accordion item as we found they weren’t being used to interact with the component