When to use this Component
Use accordion panels to include content that does not apply to most users (for example, additional details not needed to accomplish the main task) or for people who use a service regularly
Use accordion panels to give users an overview of multiple, related sections of content
Use accordion panels to present users with a choice between mutually exclusive categories
When not to use this Component
Do not use accordion panels if the majority of users will need the content to accomplish the main task, show all the content without accordion panels, even if doing so results in a longer page
Best Practices
Do
Use short and descriptive labels to ensure that the user understands what they will see before they click
Ensure each section is clearly differentiated from the other sections
Don’t
Hide sections of forms within accordions
Have accordions open by default
Tips
Test with users to decide if using an accordion panel outweighs the potential problems with hiding content
Instead of an accordion panel, consider if there is an opportunity to:
simplify and reduce the amount of content
split the content across multiple pages
keep the content on a single page, separated by headings
use a list of links as a table of contents to let users navigate quickly to specific sections of content
Accessibility
The WCAG criteria outlined in this section were chosen because they represent some of the most common failures when designing and implementing these components. For a comprehensive list, please see Web Content Accessibility Guidelines (WCAG) 2.1 (w3.org).
2.1.1 Keyboard
The objective of this technique is to provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards.
This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
For accordion panels, ensure that all functionality, including navigating between accordion panels and expanding and collapsing each panel, can be performed using only the keyboard.
Understanding Success Criterion 2.1.1: Keyboard | WAI | W3C
Key Component Features
Blazor Panel Bar Demos - Overview | Telerik UI for Blazor
Templates
The Telerik Panel Bar for Blazor is a component that can be used to navigate the user between different pages. Telerik provides an example use case of a Frequently Asked Questions feature. However, this component also supports custom header and content templates to override the default rendering. This allows us to use this component for accordion panels as illustrated in Figure 1.
Blazor Panel Bar Demos - Templates | Telerik UI for Blazor
Examples
Marine Insurance Units Application (MIUA)
The Marine Insurance Units Application (MIUA) uses accordion panels to display information about what documentation is required for Canadian and international vessels.
Marine Insurance Units Application (tc.gc.ca)
Resources
Government of Canada Resources
Expand/collapse - Canada.ca design pattern - Canada.ca
External Resources
Accordion – GOV.UK Design System (design-system.service.gov.uk)