Accompanying Files
Observation Details
Content, including interactive elements, in hidden accordion areas are reachable via keyboard navigation.
Using TAB / SHIFT + TAB, links in collapsed accordion items can be reached. See the attached screenshot for a focus order visualization.
Remediation Notes
Hidden areas and their contents must not receive keyboard focus. If using ARIA attributes to extend accessibility for the accordion and aria-hidden="true" is used on collapsed accordion items, ensure also using display: none; in CSS styles for said collapsed accordion items as well.
For a list of technical specifications, an accordion must meet, refer to BFIT-Bund – Accessible design of user interface elements: Accordion.
For an approach to accessible accordions, see GOV.UK Design System: Accordion.
Evaluate the use of <detail> + <summary> constructs to build a more accessible base-line accordion.