Accordions
Organises content into collapsible sections, allowing users to open and close information.
Examples
Accordions allow users to show or hide related content on a page. They are a list of containers which reveal more detailed content in a controlled and progressive manager when a user taps or clicks the accordion heading.
Usage
Use accordions to organise and minimise content. They can help in managing and navigating through large sets of information or options efficiently. They allow the user to decide what they want to read, reducing clutter and cognitive load.
Do:
- use it to organise non-essential content
- use on frequently asked question style pages
- ensure that when one accordion is clicked it is expanded, while other accordions are collapsed, meaning only one accordion should be open at a time
- provide a printer friendly version of your content to ensure nothing is hidden when printing
- consider using when space is limited, such as on mobile devices, to minimise excessive scrolling by providing a clear page structure
- consider the value of the content and if it really should be hidden in an accordion
- use the accordion as supplied, but contact the UX Team if you require a bespoke solution
Avoid:
- using accordions within a table
- hiding essential content within accordions as this can be missed by users
- opening accordions on hover
- placing accordions within accordions
- using accordions to simply shorten page length
- when a user needs to be able to compare information, instead display all the content at once
References
Nielsen Norman Group
Accordions Are Not Always the Answer for Complex Content on Desktops
Web Design Ledger
Best Practices For Accordion Menu In Web Design
Smashing Magazine
Designing Perfect Accordion Checklists
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
<turas-accordion accordion-id="accOne">
<turas-accordion-item accordion-item-id="accOneitem1" accordion-item-title="Accordion item title one">
<turas-lorem />
</turas-accordion-item>
<turas-accordion-item accordion-item-id="accOneitem2" accordion-item-title="Accordion item title two">
<turas-lorem />
</turas-accordion-item>
</turas-accordion>
<div id="accOne" class="ds_accordion ">
<div id="accOneitem1" class="">
<div id="headingaccOneitem1">
<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapseaccOneitem1" aria-controls="collapseaccOneitem1" aria-expanded="false">
Accordion item title one
</button>
</div>
<div id="collapseaccOneitem1" class="collapse " role='region' aria-labelledby="headingaccOneitem1">
<div class="ds_accordion-content">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
<div id="accOneitem2" class="">
<div id="headingaccOneitem2">
<button type="button" class="btn collapsed" data-bs-toggle="collapse" data-bs-target="#collapseaccOneitem2" aria-controls="collapseaccOneitem2" aria-expanded="false">
Accordion item title two
</button>
</div>
<div id="collapseaccOneitem2" class="collapse " role='region' aria-labelledby="headingaccOneitem2">
<div class="ds_accordion-content">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.</p>
</div>
</div>
</div>
</div>
Required parameters
- accordion-id - the unique ID of the accordion (use this instead of the HTML ID attribute)
- accordion-item-id - the unique ID of each accordion item
- accordion-item-title - the accordion item title
Optional parameters
- accordion-item-expanded - set to 'true' on the accordion item to have the item expanded on page load
- additional-classes - additional CSS classes
Accessibility status
This component is fully compliant with the WCAG 2.2 standard.
Testing
- check keyboard navigation to ensure the accordion is in an expected tab order and doesn't cause a keyboard trap
- accordion should open and close when pressing return and space keys
- make sure focus is visible
- test accordion with screen readers to make sure all states such as closed and expanded are read out
Developer considerations
- accordions must tell users their current states so make sure ARIA expanded = "false" is used for closed states and expanded = "true" is used for open states
- when using an accordion group make sure when you open a new one it doesn't close the previously closed one
- accordions at different parts of a page for example, one at the top and one at the bottom should act independent of each other
