Informationen
 HTML5 Symbol

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

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.

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.

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

wfwf

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:

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.