| Table of Contents |
|---|
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.
...
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)
...
| Info |
|---|
Note: The following example is a visual illustration of how this component could be used in a MAACE application. Live examples of the Telerik UI component implemented in MAACE applications will be added when available. |
...
Responsive design
In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function.
On smaller viewports, accordion panels should take the full width of the container. It is recommended to keep your labels short and descriptive. However, header and content text may wrap as needed.
...
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)
...