Accessible accordion

Accessible accordion bauen, bedienen, prüfen.

Der Name steht im Heading, der Button meldet aria-expanded, und aria-controls zeigt auf genau ein Panel.

01 / Komponentenlabor

Accordion konfigurieren und direkt bedienen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört das Labor Ihnen.

Komponentenlabor

Baumuster5/5

Heading-EbeneMehrere Panels offenaria-controls setzenPfeiltasten ergänzen

<h3>
  <button aria-expanded="false" aria-controls="faq-panel">
    Versand
  </button>
</h3>
<div id="faq-panel" hidden>…</div>

/hilfe

Live-Vorschau

Nach dem Versand erhalten Sie eine E-Mail mit der Sendungsnummer.

Code-Scan

02 / Der Unterschied

Zustände scheitern im Zusammenspiel
Ein aria-controls ohne Ziel, ein div statt Button oder eine fehlende Zustandsmeldung fallen erst auf, wenn Tastatur und Screenreader die Komponente bedienen.
Die Seite dahinter zählt
Der Website-Check findet auf Ihren Seiten unbeschriftete Bedienelemente, fehlende Alternativtexte und weitere automatisch erkennbare Barrieren.
Fundstellen mit nächstem Schritt
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Das Labor prüft das Baumuster. Der Website-Check prüft Ihre veröffentlichten Komponenten im Seitenkontext.