Observation Details
FAQ items use visually hidden text that duplicates existing content twice (button label & region label)
<span id="ODSAccordion-ContentSpan-:r0:" class="sr-only">
<span class="ods-accordion-heading">
Was ist der Vorteil von Surfsticks und mobilen 5G-Routern mit Vertrag?
</span>
content
</span>Remediation Notes
Visually hidden text should only be added if absolutely necessary, because there is no other way to achieve the wanted result.
Especially when content is already accessible to assistive technology, there should not be any duplication by using unnecessary ARIA attributes or visually hidden text content.
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".