Accordion
This prototype contains three different implementations of the ONS Accordion component for comparison.
- current implementation
- “simple” variant (no button)
- 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.
View simple accordion3. 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