Accordion HTML
Aufklappen und mithören
details und summary bringen Zustand und Tastatur mit. Drei Fehler nehmen sie.
Natives HTML-Akkordeon
Ein Name übergibt den offenen Zustand
details und summary liefern Bedienung; name verbindet die Einträge.
open → LieferzeitopenZwei bis vier Werktage.
geschlossengeschlossenopen → Garantiegeschlossenopen24 Monate ab Rechnungsdatum.
geschlossen<details name="faq"><details name="faq"><details name="faq">Drei Zeilen teilen die Verantwortung sauber
<details name="faq">Behälter und GruppeDas optionale name erlaubt nur einen offenen Eintrag.
<summary>Garantie</summary>Name und SchalterDer Browser macht die Zeile fokussierbar und bedienbar.
<p>24 Monate …</p>Aufklappender InhaltAlles nach dem ersten summary erscheint im offenen Zustand.
Drei Einträge, exklusiv geöffnet
<section aria-labelledby="faq-titel">
<h2 id="faq-titel">Häufige Fragen</h2>
<details name="faq" open>
<summary>Wie lange dauert der Versand?</summary>
<p>Zwei bis vier Werktage.</p>
</details>
<details name="faq">
<summary>Wie lange gilt die Garantie?</summary>
<p>24 Monate ab Rechnungsdatum.</p>
</details>
<details name="faq">
<summary>Wie senden Sie etwas zurück?</summary>
<p>Mit dem Etikett aus dem Paket.</p>
</details>
</section>Marker behalten, Fokus verstärken
.faq details {
border-block-end: 1px solid currentColor;
}
.faq summary {
padding: 1rem 0.25rem;
font-weight: 700;
cursor: pointer;
}
.faq summary:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.faq details > :not(summary) {
margin-inline: 1.25rem;
}Der native Marker zeigt den Zustand ohne zusätzliches Symbol. Wer ihn ersetzt, muss offenen Zustand und Kontrastmodus selbst pflegen.
open="false" ist trotzdem offen
<details>geschlossen · open fehlt<details open>offen · open ist vorhanden<details open="false">offen · Wert wird nicht ausgewertetWann gehört name dazu?
nameKurze, unabhängige Antworten; eine geöffnete reicht für die Aufgabe.
nameMenschen müssen Preise, Merkmale oder mehrere Abschnitte nebeneinander vergleichen.
So prüfen Sie es
- Tab setzt den sichtbaren Fokus auf die vollständige Frage.
- Enter und Leertaste öffnen und schließen denselben Eintrag.
- Mit gleichem
nameschließt ein neuer Eintrag den alten. - Ein Screenreader gibt den Fragetext und den offenen Zustand aus.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Frage steht neben dem summary Regel summary-name
Nur der Pfeil ist im summary. Die Frage gehört hinein, dann ist sie der Name des Schalters.
Kritisch Der Umschalter hat nur ein Symbol Regel button-name
Ein Button mit Pfeil sagt „Schaltfläche“. Der Fragetext im Button wird zum Namen.
Kritisch aria-expanded="maybe" ist kein Wert Regel aria-valid-attr-value
Nur true und false sind erlaubt. Bei details setzt der Browser den Zustand selbst.
Zum Mitnehmen
Das Akkordeon, korrigiert
details und summary, nichts weiter. Der Browser übernimmt Zustand und Tastatur.
Korrektur in 2 Schritten ansehen
Die Frage in das summary setzen
summary ist der Schalter. Sein Textinhalt ist der Name, der Zustand kommt vom Browser.
KorrekturvergleichSchritt 1 · HTML Vorher
<details> <h3>Lieferzeit</h3> <summary><svg aria-hidden="true"><use href="#chevron"></use></svg></summary> <p>Zwei bis vier Werktage.</p> </details>Nachher
<details> <summary> Lieferzeit <svg aria-hidden="true"><use href="#chevron"></use></svg> </summary> <p>Zwei bis vier Werktage.</p> </details>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die Frage. Ein Vorleseprogramm sagt „Lieferzeit, Aufklappschalter, eingeklappt“.
Den eigenen Zustand entfernen
details führt aria-expanded selbst. Ein handgesetzter Wert ist überflüssig und hier auch falsch.
KorrekturvergleichSchritt 2 · HTML Vorher
<summary aria-expanded="maybe">Garantie</summary>Nachher
<summary>Garantie</summary>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie den Bereich per Enter. Ein Vorleseprogramm sagt „ausgeklappt“, ohne dass Sie etwas setzen.