details & summary
HTML-Element

Technische Realisierung

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:

Fehlt das Element, wird der Schalter vom Browser selbst beschriftet und zwar meist mit Details:

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:

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.

Akkordeon aus details

Wenn einzelne details-Elemente mit demselben Wert für name versehen werden, kann ein Akkordeon-Effekt erzielt werden. Durch öffnen eines einzelnen Elements wird ein allfällig offenes anderes Element eingeklappt.

Der HTML-Validator meldet fälschlich, dass das name-Attribut für details nicht zulässig ist.

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">

• Wahrnehmbar

  Informationen und Steuerelemente müssen in einer technisch darstellbaren Weise wahrnehmbar sein.

• Bedienbar

  Komponenten der Benutzerschnittstelle und die Navigation müssen bedienbar sein.

• Verstehbar

  Information und die Bedienung der Benutzerschnittstelle müssen verstanden werden können.

• Robust

  Inhalt muss so robust sein, dass er von einer breiten Vielfalt von Darstellungsprogrammen inklusive assistierender Technologien interpretiert werden kann.

Modifizieren des visuellen Indikators

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.

⚠ Wenn das summary-Element in CSS mit display: block versehen ist, verschwindet der visuelle Indikator für den Erweiterungszustand!

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

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-expanded muss nicht zusätzlich eingesetzt werden.

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).

⚠ Verborgen auch für Suche

Verborgene Inhalte werden bei der Suche im Browser nicht gefunden.

Beispile für den Einsatz

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.