Das summary-Element: Der sichtbare Teil der Klappe

vom 28.05.2020 von Oliver Misch

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.

Das Dreieck gestalten oder ersetzen

Das Aufklapp-Dreieck ist ein Listenmarker und lässt sich als solcher stylen oder austauschen:

summary { list-style: none; }        /* Dreieck weg */
summary::before { content: "+ "; }   /* eigenes Zeichen */
details[open] summary::before { content: "− "; }

So entsteht das klassische Plus-Minus-Muster von FAQ-Seiten, komplett ohne JavaScript: Das Pluszeichen kommt vom geschlossenen, das Minuszeichen vom geöffneten Zustand. Wichtig dabei: Wenn der Standardmarker entfernt wird, muss ein eigener sichtbarer Hinweis her, sonst erkennt niemand die Klickbarkeitt.

Zwei Regeln für den Inhalt

Erstens: Das summary ist eine Zeile, keine Wundertüte. Kurzer, aussagekräftiger Text, der als Frage oder Titel funktioniert, keine Absätze, keine Formulare darin. Zweitens: Vorsicht mit Überschriften im summary. Technisch erlaubt ist ein h3 darin, das Bedienverhalten wird dadurch aber je nach Hilfstechnik uneinheitlich angesagt, weshalb viele Praktiker schlichten Text bevorzugen und die Gliederung der Seite den normalen Überschriften überlassen. Die FAQ-Bauanleitung mit allem Drumherum steht im FAQ-Tutorial.

Verwandt: details · dialog · Barrierefreiheit