details und summary: native Disclosure-Widgets, exklusive Akkordeons und hidden until-found

Worum es geht

<details> umschliesst Inhalt, der nur angezeigt wird, solange sein boolesches open-Attribut vorhanden ist; das erste Kindelement <summary> ist die Beschriftung und zugleich der Umschalter, standardmässig per Tastatur bedienbar. Mehreren <details>-Elementen dasselbe name-Attribut zu geben, gruppiert sie: Laut MDN kann zu jedem Zeitpunkt nur eines der Gruppe offen sein, und das Öffnen eines Elements schliesst ein anderes, was ein Akkordeon ohne Skript ergibt. Bei jeder Änderung wird ein toggle-Ereignis ausgelöst. Der Standardstil von <summary> ist display: list-item, wodurch die Markierung gezeichnet wird; ::marker gestaltet sie um, und display: block entfernt sie. Ein verwandtes Werkzeug für eingeklappten Inhalt ist hidden="until-found": MDN beschreibt den Zustand hidden-until-found als verborgen, aber erreichbar durch die Seiten-Suche des Browsers und durch Fragment-Navigation, die beforematch auslösen, das Attribut entfernen und zum Element scrollen.

Warum es wichtig ist

FAQ-Listen, Filterbereiche, Einstellungsgruppen und lange Inhaltsverzeichnisse müssen sich einklappen lassen. Das native Element bietet Tastaturzugriff, eine korrekte Rolle, Zustand, der ohne JavaScript erhalten bleibt, und mit name das Akkordeon-Verhalten, das sonst ein Skript und ARIA-Buchführung erfordert.

So wird es angewendet

• Die Beschriftung als Formulierung schreiben, die den Inhalt benennt; assistive Technologie liest sie als Beschriftung des Steuerelements, und der details-Inhalt wird zu dessen Beschreibung.
• name für Gruppen mit «nur eines offen» verwenden; weglassen, wenn Lesende Abschnitte nebeneinander vergleichen können sollen.
• Eine Überschrift nur mit Vorsicht in <summary> einsetzen: MDN weist darauf hin, dass manche Browser <summary> eine Button-Rolle geben, wodurch die Überschriftenrolle ihrer Kindelemente entfällt.
• Mit details[open] summary und ::details-content gestalten (dort wird content-visibility umgeschaltet, und dort setzen auch Öffnen- und Schliessen-Übergänge an).
• open beim Rendern der Seite auf den Abschnitt setzen, der zur aktuellen URL oder Query passt, damit Deep Links auf sichtbarem Inhalt landen.
• hidden="until-found" für Inhalt verwenden, der eingeklappt, aber auffindbar bleiben muss, und auf beforematch lauschen, wenn die umgebende Oberfläche aktualisiert werden muss.

Stolpersteine

open="false" öffnet das Element, weil das Attribut boolesch ist; zum Schliessen muss es entfernt werden. Die Druckausgabe zeigt nur offene Abschnitte; ein beforeprint-Handler kann sie öffnen, wenn der Ausdruck vollständig sein muss. Bilder und iframes innerhalb eines geschlossenen details werden in der Regel trotzdem geladen, sofern sie nicht loading="lazy" tragen. Ein <summary>, das nicht das erste Kindelement ist, wird ignoriert, und der Browser fügt eine Standardbeschriftung ein.