HTML details & summary-Element
[Materialsammlung]
Mit dem details-Element wird eine Komponente mit Inhalten zum Aus- und Einklappen realisiert. Es stellt damit Funktionalitäten eines Akkordeons zur Verfügung.
Der erforderliche Mechanismus wird durch das summary-Element ausgelöst. Es sollte dementsprechend aussagekräftig den ausklappbaren Inhalt beschreiben.
Der folgende Beispielkasten enthält eine Komponente, die mit diesen Elementen realisiert wurde:
[Text des summary-Elements]
Hier befindet sich der ausgeklappte Inhalt.
HTML Darstellung
Syntax
Der HTML-Code kann anspruchslos folgendermaßen aussehen:
<details> <summary>[Schalterbeschriftung]</summary> [HTML-Code des eingeblendeten Bereichs] </details>
summary zur Beschriftung des Schalters
Mit dem summary-Element wird eine individuelle Beschriftung des Schalters in einem details-Element festgelegt. Unter einem Diagramm könnten beispielsweise eingehende textuelle Alternativen eingeblendet werden:
Erläuterungen zum Diagramm
[Inhalt der Erläuterungen zum Diagramm
.]
Fehlt das Element, wird der Schalter vom Browser selbst beschriftet und zwar meist mit Details
:
Inhalt im Beispiel one summary-Element
Das summary-Element sollte wohl in jedem Fall verwendet werden. Fehlt das Element, liefert der W3C HTML Validator eine Fehlermeldung.
open-Attribut
Mit dem Attribut open kann festgelegt werden, dass die Detailbeschreibung standardmäßig angezeigt wird. Der Schalter dient damit zur Reduktion der Anzeige. Dies gilt sowohl für die Darstellung im Browser am Bildschirm als auch durch assistierende Technologien:
Detailbeschreibung
Die Detailbeschreibung ist bereits offen.
Zum Schließen drücken Sie auf den Schalter Detailbeschreibung
!
Der offene Erweiterungszustand erspart das Öffnen der Inhalte der Komponente. Sofern bekannt, kann der Mechanismus eines details-Elements somit zum Ausblenden von umfangreicheren Inhalten verwendet werden. Langwieriges Scrollen oder vielfache Betätigung von ↓ sind nicht mehr nötig.
Liste von details
Ein Akkordeon lässt sich als Liste von details-Elementen realisieren.
Aufzählungszeichen für Listenelemente werden mit der CSS-Anweisung list-style-type: none unterdrückt. Allerdings sollte in diesem Fall entgegen sonstigen Empfehlungen redundant zur HTML-Semantik die entsprechende ARIA-Rolle zugewiesen werden. In Safari wird ansonsten keine Listensemantik dargestellt (Stand 2023):
<ul style="list-style-type: none" role="list">
Tastaturbedienung
Der große Vorteil beim Erstellen von Webinhalt mittels des details-Elements besteht darin, dass die Tastaturbedienung gänzlich dem Browser überlassen werden kann. Für die Bedienung stehen folgende Tastaturmechanismen ohne zusätzliche Scripts zur Verfügung:
- Tabulator
- Setzt den Fokus auf das Steuerelement zum Ein- und Ausblenden (
summary). - Enter oder Leertaste
- Blendet Inhalt ein und aus, wenn sich der Fokus auf dem Steuerelement befindet.
- Pfeiltasten ↓ und ↑
- Bewegen den virtuellen Cursor eines Screen Readers in den geöffneten Inhalt unter dem Steuerelment oder wieder zurück.
- Escape
- Ohne Funktion für die
details-Komponente in den getesteten Browsern (Firefox, Chrome, Edge).
Die Taste Escape wird auch in den Praxisrichtlinien für Akkordeons nicht als Mechanismus zum Schließen des ausgeklappten Inhalts erwähnt.
CSS Anweisungen zur visuellen Gestaltung
Das nach rechts zeigende gefüllte Dreieck ist ein visueller Indikator für die Möglichkeit zum Aufklappen. Es dreht sich beim Öffnen um 90° im Uhrzeigersinn. Im Englischen wird die Komponente wegen dieser Drehbewegung auch als Twisty bezeichnet.
Der Indikator kann durch CSS-Anweisungen modifiziert werden. Im Sinne der Wiedererkennbarkeit der Komponente über Webauftritte hinweg ist davon jedoch eher abzuraten.
Ein Fokuseffekt entsprechend den Anforderungen des Erfolgskriteriums 2.4.13 kann mittels CSS etwa folgendermaßen realisiert werden:
details summary:focus {
background: yellow;
outline: 2px solid red;
outline-offset: 2px;
}
Barrierefreiheit und Nutzungsfreundlichkeit
Unterstützung durch Browser und assistierende Technologien
Die Unterstützung durch aktuelle Browser ist fast lückenlos. Im Internet Explorer und anderen älteren Browsern wird der Inhalt grundsätzlich angezeigt. Er lässt sich also nicht einklappen, Inhalte gehen jedoch nicht verloren.
Can I use | Details & Summary elements
Implizite Semantik
- Das
<summary>-Element wird als Schalter erkannt. Ein<button>-Element als Steuerelement ist also nicht zusätzlich erforderlich. - Der Erweiterungszustand wird automatisch an den Screen Reader übergeben. Das Attribut
aria-expandedmuss nicht zusätzlich eingesetzt werden.
Einsatzszenarien
Das Verhalten kann etwa für Detailbeschreibungen einer komplexen Grafik oder Medienalternativen genutzt werden. Es werden darüber hinaus Anforderungen an verschachtelte Navigationselemente korrekt erfüllt.
wf Verborgene Inhalte werden bei der Suche im Browser nicht gefunden.
Das summary-Element sollte wohl in jedem Fall verwendet werden. Fehlt das Element, habe ich bei eigenen Tests folgende Beobachtungen gemacht:
- JAWS setzt beim Fehlen eines
summary-Elements in Firefox den virtuellen Cursor an den Seitenanfang zurück. - JAWS gibt beim Fehlen eines
summary-Elements in Chrome den Erweiterungszustand nicht an (erweitert
/reduziert
).
Gruppierungssemantik
Implicit ARIA role group
Schalter-Semantik
MF/Chrome: details-Schalter werden von JAWS erkannt (JAWS+F5/ Kurztaste B)
Permitted ARIA roles No role permitted
Fußnoten mittels details?
Die Spezifikation sieht das details-Element als nicht angemessen zur Realisierung von Fußnoten an. Stattdessen sollten die Hinweise zu [WHATWG] Footnotes beachtet werden.