Details und Summary
Der Browser kann das Aufklappen schon
Schalter, Zustand, Inhalt: details und summary bringen alles drei mit.
Disclosure unter der Lupe
Ein Element. Zwei Zustände. Kein JavaScript.
Der Browser verbindet Schalter, Status und Inhalt. Sie liefern den verständlichen Namen.
Im Browser
Im HTML
<details><summary>Welche Unterlagen …</summary>Inhalt bleibt geschlossenIn der Ausgabe
- Name
- Welche Unterlagen brauche ich?
- Zustand
- eingeklappt
- Tabstopp
- summary
openIm Browser
Bringen Sie Ausweis, Antragsnummer und den letzten Bescheid mit.
Im HTML
<details open><summary>Welche Unterlagen …</summary>Inhalt ist sichtbarIn der Ausgabe
- Name
- Welche Unterlagen brauche ich?
- Zustand
- ausgeklappt
- Fokus
- bleibt auf summary
Optionale Exklusivgruppe
Ein gemeinsamer name lässt höchstens einen Eintrag offen
Das spart Höhe, erschwert aber den Vergleich mehrerer Antworten. Nutzen Sie die Gruppe nur, wenn gleichzeitiges Öffnen keinen Mehrwert bietet.
name="faq"name="faq" + openAusweis, Antragsnummer und letzter Bescheid.
name="faq"Überschrift im summary
Gültiges HTML, aber keine verlässliche Gliederung
Eine h3 darf im summary stehen. Manche Browser bilden summary jedoch als Schaltfläche ab und entfernen dabei die Rolle der enthaltenen Überschrift. Verlassen Sie Ihre Seitenstruktur deshalb auf eine Überschrift über der FAQ und prüfen Sie die Fragen zusätzlich mit Ihren Zielsystemen.
Vollständiges Muster
FAQ mit Marker, Fokus und Exklusivgruppe
JavaScript ist nicht nötig. Der Fokusrahmen liegt auf der ganzen summary-Zeile; den offenen Zustand zeigt der native Marker.
<section class="faq" aria-labelledby="faq-titel">
<h2 id="faq-titel">Häufige Fragen</h2>
<details name="faq">
<summary><h3>Wann ist die Beratungsstelle geöffnet?</h3></summary>
<p>Montag bis Freitag von 9 bis 17 Uhr.</p>
</details>
<details name="faq">
<summary><h3>Welche Unterlagen brauche ich?</h3></summary>
<p>Ausweis, Antragsnummer und den letzten Bescheid.</p>
</details>
</section>
<style>
.faq details {
border-bottom: 1px solid currentColor;
}
.faq summary {
padding: 1rem 0.25rem;
cursor: pointer;
}
.faq summary h3 {
display: inline;
margin: 0;
font: inherit;
font-weight: 700;
}
.faq summary::marker {
color: currentColor;
}
.faq summary:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
</style>Aus dem Prüfbericht
Eine Regel, ein leerer Schalter
Kritisch Der Aufklappschalter besteht nur aus einem Pfeil Regel summary-name
Ein leeres summary sagt nicht, was sich öffnet. Schreiben Sie das Thema des Inhalts direkt in das summary.
Zum Mitnehmen
Der Aufklappbereich, korrigiert
Ein Satz im summary, zwei Attribute weniger.
Korrektur in 2 Schritten ansehen
Das Thema ins Summary schreiben
Der Schalter wird zuerst gelesen, der Inhalt danach. Sein Text nennt deshalb das Thema, das sich hinter ihm öffnet.
KorrekturvergleichSchritt 1 · HTML Vorher
<details> <summary></summary> <p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p> </details>Nachher
<details> <summary>Verlauf der Nebenroute</summary> <p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p> </details>Markierte Zeilen wurden geändert
So prüfen Sie es Klappen Sie den Bereich zu. Die Zeile sagt weiterhin, was darin steht.
Rolle und Zustand dem Browser überlassen
details verwaltet den offenen Zustand selbst. Eigene Rollen und ein gesetztes aria-expanded überschreiben diese Angabe und können ihr widersprechen.
KorrekturvergleichSchritt 2 · HTML Vorher
<details> <summary role="button" aria-expanded="false"> Verlauf der Nebenroute </summary> <p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p> </details>Nachher
<details> <summary> Verlauf der Nebenroute </summary> <p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p> </details>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen und schließen Sie den Bereich. Ein Vorleseprogramm meldet den Wechsel von allein.