Zweiter Blick: details-Element
Informationen


<details>-Element & Barrierefreiheit

Bedeutung und Anwendung | Wozu dient das <details>-Element?

Das details-Element ist eine Komponente aus der HTML5-Entwicklung. Es beinhaltet ein Steuerlement zum Ein- und Ausblenden von Inhalten.

Im folgenden Beispiel wird durch einen Klick auf Obstsorten eine entsprechende Liste unter dem Steuerelement eingeblendet und bei erneutem Klick ausgeblendet:

Obstsorten
  • Äpfel
  • Birnen
  • Marillen
  • Zwetschgen

HTML Anweisungen

Die Komponente lässt sich technisch ganz einfach und übersichtlich realisieren:


<details>
  <summary>[Schalterbeschriftung]</summary>
  [HTML-Code des eingeblendeten Bereichs]
</details>

summary zur Beschriftung des Schalters

Mit dem summary-Element kann eine individuelle Beschriftung des Schalters in einem details-Element festgelegt 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 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 für Standardzustand erweitert

Mit dem Attribut open kann festgelegt werden, dass die Detailbeschreibung standardmäßig angezeigt wird. Der Schalter dient damit zur Reduktion der Anzeige, sowohl am Bildschirm als auch für assistierende Technologien.

Detailbeschreibung

Die Detailbeschreibung ist bereits offen.

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.

Visuelles Erscheinungsbild

wf

Tastaturbedienung

Für die notwendige Tastaturbedienbarkeit muss nach meinen bisherigen Tests kein zusätzlicher Aufwand betrieben werden. Die Vorteile im Kontext der Tastaturbedienbarkeit: Kein JavaScript bedeutet weniger Programmiereinsatz. Die individuellen Nutzungserfahrungen im Browser mit der eigenen assistierenden Technologie werden dadurch auch nicht durch Scripts überlagert.

Tabulator
Setzt den Fokus auf das Steuerelement zum Ein- und Ausblenden.
ENTER oder LEERTASTE
Blendet Inhalt ein und aus, wenn sich der Fokus auf dem Steuerelement (summary) befindet.
Cursortasten und
Bewegt den virtuellen Cursor eines Screen Readers.
ESCAPE
Ohne Funktion für die details-Komponente in den getesteten Browsern.

CSS Anweisungen zur visuellen Gestaltung

Unterstützung durch Browser und assistierende Technologien

In IE and some older browsers, the details are always expanded, but the content is still displayed.

Barrierefreiheit und Nutzungsfreundlichkeit

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).
  • Der W3C HTML Validator kennzeichnet das Fehlen eines summary-Elements als Fehler.

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.

Testumgebung dieser Analysen

Main Betriebssystem Windows 10 ist auf dem aktuellen Stand. Außerdem konnte ich zur Prüfung des Verhaltens folgende Browser und Screen Reader verwenden:

  • Mozilla Firefox 86.0
  • Google Chrome 89.0
  • JAWS/Fusion 2021
  • NVDA 2020-4