Barrierefreies Akkordeon

Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.

Akkordeons halten lange Seiten überschaubar: FAQ, Lieferung und Rückgabe, Produktdetails, Filtergruppen. Das APG definiert eines als „einen vertikal gestapelten Satz interaktiver Überschriften, die jeweils einen Titel, einen Inhaltsausschnitt oder ein Vorschaubild für einen Inhaltsabschnitt enthalten“ – die Überschriften blenden ihre Bereiche ein oder aus. Diese Seite zeigt das korrekte Markup. Sie gehört zur Reihe barrierefreie UI-Muster.

Wann ein Akkordeon passt

Mehrere voneinander unabhängige Abschnitte, von denen Nutzer nur einen oder zwei wollen: FAQ, Größe und Pflege, Versand und Rückgabe.
Mobile Layouts, in denen Tabs nicht passen.
Filtergruppen in der Seitenleiste einer Kategorie.

Verstecken Sie wesentliche Informationen nicht in einem geschlossenen Bereich, wenn die meisten Nutzer sie brauchen – Preis, Verfügbarkeit und die wichtigsten Produktdaten gehören auf die offene Seite.

Relevante WCAG-Kriterien

4.1.2 Name, Rolle, Wert (A): Jede Überschrift ist ein Button mit einem Zustand „aufgeklappt“ oder „zugeklappt“.
1.3.1 Info und Beziehungen (A): Abschnittstitel sind echte Überschriften.
2.4.6 Überschriften und Beschriftungen (Labels) (AA): Überschriften beschreiben ihren Abschnitt.
2.1.1 Tastatur (A) und 2.4.7 Fokus sichtbar (AA).
1.4.11 Nicht-Text-Kontrast (AA): Das Plus- oder Chevron-Icon, das den Zustand zeigt, braucht 3:1.
2.5.8 Zielgröße (Minimum) (AA): Die ganze Zeile der Überschrift ist das Ziel, nicht nur das Icon.

Codebeispiel

<!-- APG accordion: heading > button, panel controlled by the button -->
<h3>
  <button type="button" id="acc-shipping" aria-expanded="true" aria-controls="panel-shipping">
    Versand und Lieferung
  </button>
</h3>
<div id="panel-shipping">
  <p>Bestellungen bis 14 Uhr werden am selben Werktag versendet.</p>
</div>

<h3>
  <button type="button" id="acc-returns" aria-expanded="false" aria-controls="panel-returns">
    Rückgabe
  </button>
</h3>
<div id="panel-returns" hidden>
  <p>Sie können Artikel innerhalb von 30 Tagen zurückgeben.</p>
</div>

<!-- Native alternative for independent sections -->
<details>
  <summary>Pflegehinweise</summary>
  <p>Maschinenwäsche bei 30 °C.</p>
</details>

Hinweise zum APG-Muster für Akkordeons:

Der Titel jeder Überschrift steht in einem Element mit der Rolle button, das in eine Überschrift mit passender Ebene eingebettet ist, und der Button ist „das einzige Element innerhalb der Überschrift“.
aria-expanded ist true, wenn der Bereich sichtbar ist, und false, wenn er verborgen ist; aria-controls verweist auf den Bereich.
Ist ein Bereich offen und lässt das Akkordeon nicht zu, ihn zuzuklappen, hat sein Button aria-disabled="true".
Jeder Bereich kann role="region" mit aria-labelledby haben, das auf seinen Button zeigt. Das ist optional, und das APG rät davon ab, wenn viele Bereiche gleichzeitig aufgeklappt sein können (etwa ab sechs), weil dadurch zu viele Landmarks entstehen.
Das Skript schaltet aria-expanded und das Attribut hidden um. Drehen Sie das Chevron per CSS anhand von [aria-expanded="true"], damit der optische Zustand nicht von der Realität abweichen kann.

details und summary liefern Button, Zustand und Tastaturverhalten ganz ohne Skript. Sie passen gut zu FAQ und Pflegehinweisen; nehmen Sie die ARIA-Variante, wenn die Abschnittstitel zusätzlich Überschriften in der Seitenstruktur sein sollen.

Tastaturbedienung

Aus dem APG-Muster für Akkordeons:

Taste	Funktion
Enter oder Leertaste	Auf einer zugeklappten Überschrift: klappt ihren Bereich auf (und, wenn nur einer offen sein darf, klappt den anderen zu). Auf einer aufgeklappten Überschrift: klappt sie zu, sofern das Akkordeon es erlaubt
Tab	Nächstes fokussierbares Element; alle Überschriften und fokussierbare Inhalte in offenen Bereichen liegen in der Tab-Reihenfolge
Umschalt + Tab	Vorheriges fokussierbares Element

Typische Fehler in Online-Shops

Anklickbare div-Überschriften mit Chevron-Icon – kein Button, kein Zustand, keine Tastatur.
Die Überschrift innerhalb des Buttons oder der Button, der den ganzen Bereich umschließt, was die Überschriftenstruktur zerstört.
aria-expanded einmal gesetzt und nie aktualisiert.
Geschlossene Bereiche, die mit max-height: 0 verborgen sind, deren Links aber weiter den Fokus erhalten.
FAQ-Fragen, die wie Überschriften gestaltet, aber als p oder span ausgezeichnet sind, oder Überschriften, die Ebenen überspringen.
Nur das kleine „+“-Icon ist anklickbar, nicht der Titel.
Filter-Akkordeons, die beim Öffnen die Seite neu laden und dabei den Fokus verlieren.

Was automatische Prüfungen finden und was manuell zu testen ist

Automatisch (axe-core-Regel)	Was sie findet
`button-name`	Überschriften-Buttons ohne Namen
`summary-name`	`summary`-Elemente ohne Namen
`aria-valid-attr-value`	Ungültige `aria-expanded`-Werte, `aria-controls` mit Verweis auf fehlende IDs
`empty-heading`, `heading-order`	Leere Überschriften, übersprungene Überschriftenebenen (Hinweis)
`nested-interactive`	Links oder Buttons innerhalb des Überschriften-Buttons
`aria-hidden-focus`	Fokussierbare Links in einem mit `aria-hidden` verborgenen Bereich
`landmark-unique`	Viele `region`-Bereiche mit demselben Namen (Hinweis)

Alle sind Karten in unserer Regelbibliothek. Manuelle Tests: Öffnen und schließen Sie jeden Abschnitt mit Enter und Leertaste, prüfen Sie, dass ein Screenreader „zugeklappt“ und „aufgeklappt“ ansagt, dass geschlossene Bereiche keinen Fokus erhalten können und dass das Zustands-Icon in beiden Themes und bei 200 % Zoom sichtbar ist.

Starten Sie die kostenlose Prüfung einer Seite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Wie baue ich ein barrierefreies Akkordeon?

Setzen Sie jeden Abschnittstitel in eine Überschrift und in die Überschrift einen Button mit aria-expanded und aria-controls, der den Bereich ein- oder ausblendet. Das ist das APG-Muster für Akkordeons. Die nativen Elemente details und summary sind eine einfachere Alternative für voneinander unabhängige Abschnitte.

Welche Tasten braucht ein Akkordeon?

Enter oder Leertaste auf einem Überschriften-Button öffnet oder schließt den zugehörigen Bereich, und Tab und Umschalt + Tab bewegen sich durch die Überschriften und die Links in geöffneten Bereichen. Pfeiltasten sind nicht erforderlich.

Sollte jeder Bereich eines Akkordeons role="region" haben?

Das ist optional. Das APG rät davon ab, wenn viele Bereiche gleichzeitig offen sein können, etwa ab sechs, weil dadurch zu viele Landmarks entstehen.

Ist Inhalt in einem geschlossenen Bereich ein Problem für die Barrierefreiheit?

Nein, Inhalt in einem geschlossenen Bereich ist in Ordnung, solange der Button erreichbar ist und seinen Zustand ansagt. Der Inhalt muss korrekt verborgen sein, zum Beispiel mit dem Attribut hidden, damit er im geschlossenen Zustand keinen Fokus erhalten kann.

Kann eine automatische Prüfung ein Akkordeon testen?

Sie findet Überschriften-Buttons oder summary-Elemente ohne Namen, leere Überschriften, ungültige aria-expanded-Werte und aria-controls, die auf fehlende IDs zeigen. Ob sich der Zustand ändert und der Bereich sich per Tastatur öffnet, muss manuell getestet werden.

Quellen

W3C WAI, APG Accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
WHATWG, HTML Living Standard, interactive elements (details and summary): https://html.spec.whatwg.org/multipage/interactive-elements.html