html-einfach.de

Barrierefreie Komponenten · Interaktive Widgets

Akkordeons barrierefrei umsetzen

Von Zuletzt geändert am

Ein Akkordeon ist eine Reihe von Überschriften, die jeweils einen Inhaltsbereich auf- und zuklappen – ideal, um lange Seiten wie FAQ-Listen kompakt zu halten. Im Kern ist es dasselbe Disclosure-Muster, das auch hinter aufklappbaren Menüs steckt: ein Button, der einen Bereich zeigt oder verbirgt. Nur wird es hier auf Inhalt statt auf Navigation angewendet.

Und wie so oft gilt: Bevor man es selbst baut, lohnt der Blick auf das, was HTML schon mitbringt.

Der einfachste Weg: <details> / <summary>

Für viele Akkordeons brauchst du kein JavaScript und kein ARIA. <details> mit <summary> ist ein fertiges, natives Disclosure – fokussierbar, tastaturbedienbar, mit korrekter Ansage, alles inklusive:

<details>
  <summary>Wie hoch sind die Versandkosten?</summary>
  <p>Innerhalb Deutschlands versenden wir ab 50 € kostenfrei …</p>
</details>

<details>
  <summary>Wie lange dauert die Lieferung?</summary>
  <p>In der Regel zwei bis drei Werktage …</p>
</details>

Das funktioniert ohne eine Zeile Skript und überlebt sogar ausgeschaltetes JavaScript. Für ein klassisches FAQ ist das meine erste Wahl – schlicht, robust, nichts kann kaputtgehen.

Der ARIA-Weg, wenn du mehr Kontrolle brauchst

Sobald das Verhalten über das Native hinausgehen soll – etwa „immer nur ein Panel offen“ oder eine bestimmte Animation –, baut man das Muster mit Buttons und aria-expanded nach. Wichtig dabei: Der Button steckt in einer Überschrift, nicht umgekehrt. So bleibt das Akkordeon Teil der Überschriften-Hierarchie und Screenreader-Nutzende können es per Überschriften-Navigation anspringen.

<h3>
  <button type="button" aria-expanded="false" aria-controls="panel-versand" id="kopf-versand">
    Wie hoch sind die Versandkosten?
  </button>
</h3>
<div id="panel-versand" role="region" aria-labelledby="kopf-versand" hidden>
  <p>Innerhalb Deutschlands versenden wir ab 50 € kostenfrei …</p>
</div>

Die Aufgaben des Skripts bleiben überschaubar: beim Klick aria-expanded umschalten und das hidden-Attribut am Panel entfernen oder setzen. Das hidden sorgt dafür, dass geschlossene Panels weder sichtbar noch per Tab erreichbar sind – ein Detail, das gern vergessen wird.

Tastatur und Verhalten

Die Tastaturbedienung ist angenehm vertraut, weil es eben Buttons sind:

  • Enter / Leertaste auf der Überschrift klappt auf und zu.
  • Tab läuft normal weiter – in ein geöffnetes Panel hinein und wieder heraus.
  • Pfeiltasten sind nicht nötig. Anders als bei Tabs erwartet beim Akkordeon niemand eine Pfeiltasten-Navigation zwischen den Köpfen.

Ob sich beim Öffnen eines Panels die anderen schließen, ist eine reine Design-Entscheidung – für die Barrierefreiheit ist beides in Ordnung. Ich lasse gern mehrere offen, weil das Vergleichen dann leichter fällt; nötig ist das aber nicht.

Häufige Fehler

  • <div> statt <button> als Kopf. Ohne echtes Bedienelement fehlen Fokus und Tastaturbedienung – siehe Buttons vs. Links.
  • aria-expanded nicht aktualisiert. Der Zustand am Button muss dem sichtbaren Panel entsprechen.
  • Geschlossenes Panel nur per CSS verborgen. Ohne hidden (oder display:none) bleibt es per Tab erreichbar, obwohl es zu ist.
  • Kein Überschriftenkopf. Steckt der Button nicht in einer Überschrift, fehlt das Akkordeon in der Dokumentstruktur.
  • <details> durch aufwendigen Eigenbau ersetzt, ohne Mehrwert. Wenn das Native reicht, würde ich es nehmen.

Häufige Fragen

<details> oder die ARIA-Variante?

<details>, wann immer es reicht – es ist robust und kostenlos. Zur ARIA-Variante greife ich nur, wenn ich Verhalten oder Animation brauche, die das native Element nicht hergibt.

Ist ein Akkordeon dasselbe wie Tabs?

Verwandt, aber nicht gleich. Akkordeons stapeln Bereiche untereinander und können mehrere offen haben; Tabs zeigen genau ein Panel und nutzen Pfeiltasten. Auf schmalen Bildschirmen werden Tabs oft zu Akkordeons umgebaut – das ist ein bewährtes Muster.

Darf der Inhalt im Panel weitere Überschriften haben?

Ja. Achte nur darauf, dass die Ebenen logisch bleiben: Sitzt der Kopf auf <h3>, beginnt der Panelinhalt sinnvollerweise bei <h4>.

Fazit

Ein Akkordeon ist Disclosure für Inhalte. Für den Normalfall ist <details>/<summary> die einfachste und robusteste Lösung – ganz ohne JS und ARIA. Brauchst du mehr Kontrolle, baust du es mit einem <button aria-expanded> in einer Überschrift nach und blendest geschlossene Panels per hidden aus. So bleibt es tastaturbedienbar, auffindbar und unkompliziert.