Akkordeon (Accordion)

Ein Akkordeon (englisch Accordion) besteht aus mehreren Kopfzeilen, mit denen sich zugehörige Inhaltsbereiche ein- und ausklappen lassen. Typisch sind FAQ-Bereiche, Produktdetails oder mobile Navigation.

Barrierefreie Umsetzung

• Nativ: <details><summary>Frage</summary>Antwort</details> – tastaturbedienbar und mit Zustand für Screenreader; das name-Attribut erlaubt exklusive Gruppen
• Nach ARIA APG: Überschrift (z. B. h3) mit einem <button aria-expanded="false" aria-controls="panel-1"> darin; Panel mit id, optional role="region" und aria-labelledby
• Enter und Leertaste öffnen/schließen; optional Pfeiltasten zwischen Kopfzeilen
• Gut sichtbarer Zustandsindikator (Pfeil, Plus/Minus), der sich mit dem Zustand ändert
• Geschlossene Inhalte mit hidden ausblenden, damit sie nicht fokussierbar sind

Akkordeon und SEO/GEO

Inhalte in Akkordeons werden von Google indexiert, sofern sie im HTML stehen. Kombiniert mit FAQPage-Schema eignen sich FAQ-Akkordeons gut für KI-Antworten. Mit hidden="until-found" bleiben Inhalte zudem per Browsersuche auffindbar.

Häufige Fragen

Sollten mehrere Bereiche gleichzeitig offen sein dürfen?

In der Regel ja. Das erleichtert Vergleiche; erzwungenes Schließen kann verwirren.

Akkordeon oder Tabs?

Akkordeons funktionieren auf schmalen Bildschirmen besser und eignen sich für viele Abschnitte; Tabs für wenige, gleichrangige Ansichten.

Verwandte Begriffe: Tabs, ARIA, Semantisches HTML, Strukturierte Daten