Akkordeon: auf- und zuklappen, ohne jemanden auszusperren

Wann Sie das Muster einsetzen

Nutzen Sie ein Akkordeon, wenn Besucher nur einzelne Abschnitte brauchen, etwa bei häufigen Fragen. Für einen einzelnen aufklappbaren Bereich reicht oft das native <details> mit <summary>: Es ist ohne JavaScript bedienbar und meldet seinen Zustand selbst. Ein eigenes Akkordeon lohnt sich, wenn Sie Überschriften-Struktur und Gestaltung genau steuern wollen.

Verstecken Sie keine Pflichtinformationen wie Preise oder Fristen in geschlossenen Bereichen, die man leicht übersieht.

Rollen, Zustände, Eigenschaften

• Jeder Kopf ist ein <button> innerhalb einer Überschrift (<h3> o. ä.). So bleibt die Seitenstruktur für Screenreader erhalten.
• aria-expanded="true" oder "false" am Button meldet, ob der Bereich offen ist.
• aria-controls verweist auf die ID des Inhaltsbereichs.
• Geschlossene Bereiche sind mit hidden ausgeblendet, damit sie auch für Screenreader und die Tab-Reihenfolge verschwinden.
• Optional: Bereich mit role="region" und aria-labelledby auf den Button, aber nur bei wenigen Bereichen (bis etwa sechs), sonst entstehen zu viele Landmarken.

Tastaturbedienung

Code

<h3>
  <button type="button" aria-expanded="false"
    aria-controls="faq-1" id="faq-1-btn">
    Wie lange dauert ein Audit?
  </button>
</h3>
<div id="faq-1" role="region"
  aria-labelledby="faq-1-btn" hidden>
  <p>In der Regel wenige Werktage.</p>
</div>

<script type="module">
for (const btn of document.querySelectorAll('[aria-controls]')) {
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    document.getElementById(
      btn.getAttribute('aria-controls')).hidden = open;
  });
}
</script>

Häufige Fehler

• Klickbares <div> statt Button: nicht per Tastatur erreichbar, keine Rolle, kein Zustand.
• Zustand nur über ein Plus- oder Pfeilsymbol angezeigt, ohne aria-expanded.
• Inhalt nur mit height: 0 versteckt: Links darin bleiben in der Tab-Reihenfolge und werden vorgelesen.
• Der ganze Kopf ist eine Überschrift ohne Button, oder der Button steht außerhalb der Überschrift: die Überschriftenliste wird lückenhaft.

Passende WCAG-Kriterien

• 4.1.2 Name, Rolle, Wert
• 2.1.1 Tastatur
• 1.3.1 Info und Beziehungen
• 2.4.7 Fokus sichtbar
• 2.4.6 Überschriften und Beschriftungen

Quellen

• W3C APG: Accordion Pattern
• HTML-Standard: das details-Element