Accordions are a vertically stacked list of headings. They reduce the need for users to scroll through a lot of content, as the headings act as interactive elements which show or hide the related content.
Tab
and Shift-Tab
are used to navigate forward and backward through each accordion header and all focusable elements in the accordion should be included in the tab order. Enter
or Space
expand and collapse each accordion panel.
The two main components are:
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
div
element with a p-accordion__heading
class and the role=heading
attribute. This heading should have an appropriate aria-level
label, depending on its position in the hierarchy of the page.aria-expanded=”true”
aria-controls
attribute set to the ID of the related accordion panel.aria-labelledby
attribute to the accordion panel, set to the ID of the button heading.