LU04c – Accessibility & FAQ Accordion

Dies ist eine alte Version des Dokuments!

Eine zugängliche Webseite kann von allen Menschen genutzt werden – auch von Personen, die eine Tastatur oder einen Screen Reader verwenden. Beim Accordion ist das besonders wichtig.

Element	Tastatur-fokussierbar?	Screen Reader erkennt es als interaktiv?
`<button>`	ja, automatisch	ja, als «Schaltfläche»
`<div>`	nein (nur mit extra Attributen)	nein

Verwenden Sie immer <button> für klickbare Elemente im Accordion – niemals <div> oder <span>.

Das Attribut aria-expanded teilt Screen Readern mit, ob ein Panel offen oder geschlossen ist:

<!-- HTML: Startzustand -->
<button class="accordion-btn" aria-expanded="false">
  Was ist ein FAQ?
</button>
<div class="panel">
  FAQ steht für Frequently Asked Questions...
</div>

// JavaScript: Zustand kommunizieren
btn.addEventListener('click', () => {
  const offen = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !offen); // Wert umkehren
  panel.classList.toggle('open');
});

Wenn jemand per Tastatur navigiert, muss immer sichtbar sein, welches Element den Fokus hat. Entfernen Sie den Standard-Outline nie ohne Alternative:

/* ❌ NICHT machen: */
button:focus { outline: none; }
 
/* ✅ Korrekte Alternative – nur bei Tastatur-Fokus sichtbar: */
button:focus-visible {
  outline: 3px solid #263fa9;
  outline-offset: 3px;
  border-radius: 4px;
}

Testen Sie Ihr Accordion per Tastatur: Drücken Sie mehrfach Tab – Sie sollten jeden Button erreichen. Drücken Sie Enter oder Space – das Panel soll auf/zu gehen. Sehen Sie immer, wo der Fokus ist?

<div class="accordion">
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 1
    </button>
    <div class="panel">
      Antwort 1...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 2
    </button>
    <div class="panel">
      Antwort 2...
    </div>
  </div>
 
  <div class="accordion-item">
    <button class="accordion-btn" aria-expanded="false">
      Frage 3
    </button>
    <div class="panel">
      Antwort 3...
    </div>
  </div>
 
</div>

.accordion {
  border: 1px solid #dde4f0;
  border-radius: 8px;
  overflow: hidden;
}
 
.accordion-item {
  border-bottom: 1px solid #dde4f0;
}
 
.accordion-item:last-child {
  border-bottom: none;
}
 
.accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  font-size: 1rem;    /* rem, nicht px! */
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
 
.accordion-btn:hover {
  background-color: #f5f8ff;
}
 
.accordion-btn:focus-visible {
  outline: 3px solid #263fa9;
  outline-offset: -3px;
}
 
/* Panel: standardmässig versteckt */
.panel {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
}
 
/* Panel: sichtbar wenn Klasse 'open' gesetzt */
.panel.open {
  display: block;
}

const buttons = document.querySelectorAll('.accordion-btn');
 
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const panel = btn.nextElementSibling;
    const istOffen = panel.classList.contains('open');
 
    // Alle Panels schliessen
    buttons.forEach(andererBtn => {
      andererBtn.nextElementSibling.classList.remove('open');
      andererBtn.setAttribute('aria-expanded', 'false');
    });
 
    // Dieses Panel öffnen (nur wenn es vorher zu war)
    if (!istOffen) {
      panel.classList.add('open');
      btn.setAttribute('aria-expanded', 'true');
    }
  });
});

Bauen Sie Ihr eigenes FAQ Accordion. Ziel für heute: HTML-Struktur, CSS und ein funktionierender Click-Handler.

Schritt 1 – Neues Projekt anlegen

Erstellen Sie den Ordner faq-accordion/ mit folgenden Dateien:

index.html
style.css
script.js

Verlinken Sie CSS und JS in Ihrer HTML-Datei (<link> und <script src=„…“>).

Schritt 2 – HTML-Struktur bauen

Erstellen Sie mindestens 3 FAQ-Items mit der Struktur aus dem Abschnitt oben. Denken Sie an aria-expanded=„false“ an jedem Button.

Schritt 3 – CSS stylen

Panel standardmässig mit display: none ausblenden
Klasse .open mit display: block definieren
Button gestalten: width: 100%, padding, border: none, cursor: pointer

Schritt 4 – JavaScript: Click-Handler

Alle Buttons mit querySelectorAll holen
forEach über alle Buttons
addEventListener('click', …) auf jeden Button
Panel mit classList.toggle('open') ein-/ausblenden

Schritt 5 – aria-expanded setzen

Beim Klick den korrekten Wert von aria-expanded mit setAttribute setzen. Tipp: Aktuellen Wert zuerst lesen (getAttribute), dann den umgekehrten setzen.

Kein AI-generierter Code! Schreiben Sie Ihren Code selbst. Sie können diese Seite als Referenz nutzen und Teile übernehmen – aber tippen Sie selbst und verstehen Sie, was Sie schreiben. Das Ziel ist, dass Sie das Muster verinnerlichen.