Observation Details
FAQ uses non-interactive description list <dl> to build accordion functionality. Using tabindex="0" allows (keyboard) focus of non-interactive <dt> element. Needed accessibility functionality however is not provided. Besides focus, an accordion item must accurately announce its state (collapsed / expanded) and its own interactivity (so the user knows it is operable), and a few more.
Side note: Failure of keyboard accessibility is noted in observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).
Remediation Notes
Building an accordion component from generic HTML elements or using semantic HTML elements with different functionality results in inaccessible user experiences, as a long list of requirements must be met. A few important ones:
For the area labeling, the button role must be communicated
The parent / child relationships of the elements within the accordion must be communicated
The status of the area labels must be communicated
The buttons with the area labels must have a concise and expressive Accessible Name
It must be possible to access, operate and exit the buttons with the area labels with assistive technology
Updates concerning the Accessible Name, value or status of the area labels must be communicated
The size and position of the area labels and areas must be communicated
Please see BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion" for full details about necessary steps to build an accordion component, including presentation, operation, programming. Generally, for non-native complex components, functionally closest existing elements should be used (buttons, details/summary, ...).
For remediation recommendation, please also refer to observation "FAQ not accessible via keyboard" (2.1.1 Keyboard).