Observation Details
An accordion component consists of collapsible elements with a header and content, which can be hidden. To hide / show the content, an interactive element must be present to operate the accordion. The FAQ on the shop pages are not using any semantic interactive elements.
No interaction possibility is announced via screen reader, navigating the accordion. Instead, the only announcements made are headings and images with no alt attribute, which are announced as "image". Without "guessing", a screen reader user will not be able to know that the element is interactive.
Side note: Hovering over the accordion at any point, changes the mouse cursor to pointer. As this is set on the collapsible elements and not reversed on the content panel, the cursor looks like it is hovering an interactive element inside the whole accordion, mistakenly giving the user the impression of hovering interactive elements. While this is not part of the criterion's failure, it is highly recommended to remediate.
Remediation Notes
The use of semantic HTML is adamant to a good user experience and web accessibility. Ideally, native HTML is used. In case of an accordion, this could be realized by using the <detail> and <summary> elements.
If there is a valid reason to not use those, ensure the use of interactive elements (<button>) for the interactive parts of the accordion.
The technical requirements for building an accessible accordion component can be found in the BFIT-Bund Handreichung "Accessible design of user interface elements – Accordion".
The accordion, while not strictly defined as such, can be defined as an opposite to a tab group. They both have the purpose of hiding content from the user to be revealed on user interaction. Defining accordion and tab group as opposites allows for an easy rule of usage. Tab groups are used, if and only if there must always be exactly one content panel visible. The accordion is then used, whenever the possibility of showing more than one content panel at the same time is needed or wanted. This distinction can e.g. be found in the documentation of the GOV.UK Design System at Accordion – "Decide between using accordions, tabs and details".