Das summary-Element: Der sichtbare Teil der Klappe
Das <summary> ist die immer sichtbare, anklickbare Kopfzeile eines details-Elements. Es existiert ausschließlich in dieser Rolle: außerhalb von details hat es keine Funktion und keine Berechtigng.
Syntax
HTML-Code
<details>
<summary>Systemvoraussetzungen anzeigen</summary>
<ul>
<li>Ein Browser</li>
<li>Das war es schon</li>
</ul>
</details>Die Regeln
- Das summary steht als erstes Kind direkt im details, nicht weiter unten und nicht in einen div gewickelt.
- Pro details gibt es genau ein summary. Fehlt es, spendiert der Browser eine Standardbeschriftung ("Details"), die niemandem etwas sagt.
- Der Text sollte wie eine gute Überschrift funktionieren: Er verrät was hinter der Klappe wartet. "Mehr anzeigen" ist so nichtssagend wie "hier klicken" bei Links.
Gestalten und Feintuning
Das Dreieck-Symbol lässt sich per CSS gestalten oder entfernen (über den Listen-Marker des summary), und der Cursor darf ruhig per cursor: pointer signalisieren dass hier geklickt werden kann. Innerhalb des summary sind auch Inline-Elemente erlaubt, etwa ein <strong> oder ein kleines Icon. Überschriften-Elemente hineinzusetzen ist zwar technisch möglich, bringt aber verwirrende Doppelrollen in die Gliederung, meist fährt man mit schlichtem Text besser.
Typische Fehler
- Interaktives im summary. Ein Link oder Button in der Klappzeile führt zu Klick-Konflikten: Was gilt jetzt, Aufklappen oder Link? Interaktive Elemente gehören in den Inhalt darunter.
- summary als schicke Box zweckentfremden, ohne details drumherum. Dafür gibt es div und CSS.
- Die Klappzeile nur mit JavaScript-Logik nachbauen. Das Duo details/summary bringt Tastaturbedienung und Screenreader-Ansage gratis mit, selbstgebaute Lösungen müssen das alles nachliefernn.
Verwandt: details · dialog · Barrierefreiheit