details & summary
HTML-Elemente für Ausklappmechanismus

HTML Code

Syntax

Die Grundstruktur einer HTML-Ausklappkomponente erscheint im Code folgendermaßen:

<details>
  <summary>
    [Schalterbeschriftung]
  </summary>
  [HTML-Elemente des anzuzeigenden Bereichs]
</details<

summary zur Beschriftung des Schalters

Mit dem summary-Element wird eine individuelle Beschriftung des Schalters in einem details-Element festgelegt. Das Element dient gleichzeitig als Steuerelement für die Mechanismen zum Aus- und Einklappen.

Mit der Komponente kann beispielsweise die Antwort auf eine Frage in einem Flachwitz verborgen werden. Die Frage ist dabei die Beschriftung des summary-Elements:

summary notwendig?

Ein aussagekräftiges summary-Element sollte in jedem Fall vorgesehen werden. Ansonsten treten folgende Probleme auf:

• Fehlt das Element, wird der Schalter vom Browser selbst beschriftet, und zwar meist lediglich mit Details.
• CSS-Anweisungen zur Darstellung des Schalters, wie Fokuseffekte, oder Modifikationen der Darstellung des Erweiterungszustands gehen verloren.
• Fehlt das Element, liefert der W3C HTML Validator eine Fehlermeldung.

Du kannst das entsprechende Verhalten in deinem aktuellen Browser im folgenden Beispiel beobachten:

open-Attribut

Beim Laden der Webseite wird der ausklappbare Inhalt normalerweise nicht angezeigt. Mit dem Attribut open kann festgelegt werden, dass die Zusatzinformation beim Laden automatisch angezeigt wird. Der Schalter dient zunächst zur Reduktion der Anzeige.

<details open>

Du kannst das Verhalten im folgenden Beispiel testen:

CSS Darstellungstipps

Visuelle Indikatoren

Indikator modifizieren

Browser stellen den Erweiterungszustand meist mit den Zeichen ▸ und ▾ vor dem Text des summary-Elements dar. Wegen der Drehbewegung beim Aktivieren wird dieser Indikator auch als Twisty bezeichnet.

Intuitiver dürften für vertikal erscheinende Mechanismen Indikatoren sein, die nach unten oder oben zeigen. Die Standardindikatoren werden daher gelegentlich durch Chevrons ersetzt, die beim geschlossenen Zustand nach unten zeigen und beim geöffneten Zustand nach oben. Leider gibt es für diese Chevrons im Unicode noch kein entsprechendes Zeichen, weshalb vielfach die Zeichen ⌄ (Pfeilspitze abwärts) und ⌃ (Pfeilspitze aufwärts) als Indikatoren dienen.

Screen Reader geben den Erweiterungszustand unabhängig vom visuellen Indikator korrekt an. Eine Beschreibung des Indikators ist daher unnötig und störend. Leider verlautet Firefox weiterhin wortreich etwa: Gefülltes kleines Dreieck nach rechts. (Version 146, Sprachausgabe Eloquence) Das Problem wurde bereits vor Jahren an das Entwicklungsteam kommuniziert:

Bugzilla | Consider removing CSS marker from summary element's accessible name

Problembericht an Mozilla aus dem Jahr 2022.

Die visuelle Darstellung und die Ausgabe durch Screen Reader kann zur Optimierung mittels CSS modifiziert werden. Dazu sind folgende Maßnahmen erforderlich:

1. Mit dem CSS-Pseudoelement ::marker werden die Indikatoren für den Erweiterungszustand modifiziert.

   MDN | ::marker

2. Mit der CSS-Anweisung content: url([Pfad]) werden die Standardindikatoren durch eine Grafikdatei ersetzt.
3. Mit dem CSS-Selektor [open] wird der Indikator für den geöffneten Zustand festgelegt.

4. Durch einen leeren Wert hinter dem Schrägstrich wird in der Anweisung der Indikator für Screen Reader verborgen (/ "").

   MDN | content #alternative text

Folgender CSS-Code dient zum visuellen Modifizieren der Indikatoren für den geschlossenen und offenen Zustand und verbirgt die Indikatoren gleichzeitig für Screen Reader:

details summary::marker {
  content: url("chevron-down.svg") / "";
}
details[open] summary::marker {
  content: "url(chevron-up.svg") / "";
}

Der Indikator für den Erweiterungszustand wird ohne weitere Anweisungen standardmäßig links angeordnet.

Indikator Anordnung

Browser stellen den Indikator für den Erweiterungszustand gewöhnlich links vor der Beschriftung des summary-Elements dar. Diese Anordnung sollte schon aus Gründen der Wiedererkennbarkeit des Ausklappmechanismus in der Regel beibehalten bleiben.

Aus kosmetischen Gründen wird der Indikator jedoch gelegentlich rechtsbündig in einem Blockelement dargestellt. Die folgende Grafik zeigt diese visuelle Maßnahme für ein Akkordeon.

In der folgenden Grafik wird grau hinterlegt ein Ausschnitt des Akkordeons dargestellt, der unter Verwendung einer Vergrößerungssoftware ausgewählt sein könnte. Die Indikatoren sind auf Grund der reduzierten Breite außerhalb des grau hinterlegten Bereichs.

Sehen wir uns diesen Ausschnitt isoliert und ohne grauer Hinterlegung an. Würdest du intuitiv die Erweiterungsmöglichkeit ohne Chevrons erkennen?

Screen Reader stellen die Komponenten bei korrektem Markup unabhängig von der visuellen Anordnung dat. Doch nur wenige Menschen mit Sehbehinderung arbeiten mit Screen Reader und Sprachausgabe.

Beim Arbeiten mit einer Vergrößerungssoftware beruht die Wahrnehmung auf Bildschirmausschnitten. Die Erarbeitung des Inhalts beginnt dabei in der Regel am linken Bildschirmrand. Menschen mit Sehbehinderung können daher verfügbaren Mechanismen übersehen, wenn Indikatoren rechtsbündig angeordnet sind. Die Indikatoren sollten daher auf der linken Seite angeordnet bleiben.

Schalter nicht als Block

Wenn das summary-Element in CSS mit display: block versehen ist, kann der visuelle Indikator für den Erweiterungszustand verschwinden. Du kannst das Verhalten deines Browsers im folgenden Beispiel testen:

Mauszeiger Darstellung

Schalter dienen zum Auslösen eines Mechanismus innerhalb einer Webseite. Das Öffnen oder Schließen einer Ausklappkomponente durch das summary-Element ist als derartiger Mechanismus anzusehen. Überraschenderweise stellen selbst gängige Browser beim Überstreichen lediglich den Textcursor dar, welcher die Möglichkeit zum Markieren von Textabschnitten anzeigt.

Du kannst das Verhalten deines Browsers mit der Maus im folgenden Beispiel testen:

Zur Festlegung der Mausdarstellung beim Überstreichen steht die CSS-Eigenschaft cursor zur Verfügung. Leider gibt es dafür keinen eigenen Wert zum Anzeigen des Typs Schalter. Ein Pfeil wird jedoch üblicherweise als Mausindikator durch folgende Anweisung in der CSS-Datei angezeigt:

details summary {
  cursor: default;
}

Du kannst das damit erreichte angemessene Verhalten des Mauszeigers im folgenden Beispiel testen:

Container für Inhalt

Es empfiehlt sich, ausklappbare Inhalte in einen div-Container einzubetten. Auf diese Weise lassen sich Darstellungsoptionen im CSS-Code einfacher realisieren.

Der HTML-Code müsste etwa folgendermaßen aussehen:

<details>
  <summary>
    [Schalterbeschriftung]
  </summary>
  <div>
    <p>
      Ich bin der zusätzliche Inhalt.
    </p>
  </div>
</details>

Ein erhöhter vertikaler Abstand zum Steuerelement (summary) und ein Einrücken werden beispielsweise mit folgenden Anweisungen erzielt:

details div {
  margin-top: .5rem;
  padding-left: 32px; 
}

Fokuseffekt

Mit der Taste Tabulator kann der Fokus von einem Steuerelement zum nächsten bewegt werden. Damit am Bildschirm erkennbar ist, auf welchem Element sich der Fokus befindet, müssen für den fokussierten Zustand visuelle Indikatoren vorgesehen werden. Ein Fokuseffekt entsprechend den Anforderungen des Erfolgskriteriums 2.4.13 kann mittels CSS etwa folgendermaßen realisiert werden:

details summary:focus {
  outline: red solid 2px;
  outline-offset: 2px;
}

Der folgende Screenshot zeigt den Unterschied der Darstellung ohne und mit dem Fokusindikator aus diesem Code.

Barrierefreiheit und Nutzungsfreundlichkeit

Implizite Semantik

Der Vorteil des details-Elements zum Realisieren einer ausklappbaren Komponente liegt in dessen impliziter Semantik und Funktionalität.

• Das summary-Element verfügt implizit über die Schalterrolle. Ein button-Element als Steuerelement ist also nicht zusätzlich erforderlich.
• Der Erweiterungszustand wird automatisch an den Screen Reader korrekt übergeben. Die Werte für das Attribut aria-expanded müssen nicht über Scripts angepasst werden.

Die Komponenten müssen also nicht mit zusätzlichen Rollen versehen werden und für die Funktionalitäten ist kein JavaScript erforderlich. Die Nutzungserfahrung ist über Webauftritte hinweg einheitlich und in aktuellen Browsern standardkonform.

Tastaturbedienung

Mechanismen können in einer ausklappbaren Komponenten mit folgenden Tasten ausgelöst werden:

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 Steuerelement oder wieder zurück.

Die Taste Escape dient in den gängigen Browsern nicht zum Schließen des ausgeklappten Inhalts. Eine entsprechende Funktionalität wird auch nicht in den Praxisrichtlinien für Akkordeons vorgeschlagen.

Inhaltsblock überspringen

Der Mechanismus eines details-Elements kann zum Ausblenden von umfangreicheren Inhalten bereitgestellt werden. Langwieriges Scrollen, Wischen oder vielfaches Drücken von ↓ sind in Folge nicht mehr nötig.

Erfolgskriterium "Blöcke umgehen"

Zur Erfüllung des Erfolgskriteriums 2.4.1 Blöcke umgehen könnte auch ein Einklappmechanismus eingesetzt werden. In diesem Erfolgskriterium werden Mechanismen zum Überspringen von Inhalten verlangt, die sich auf Unterseiten eines Webauftritts wiederholen. Ein typischer sich wiederholender Inhalt befindet sich im Kopfbereich mit Logo und Navigationskomponenten.

In der Praxis werden jedoch überwiegend folgende Strategien eingesetzt:

• Der Hauptinhalt wird durch ein Einsprunglink erreicht.
• Seitenregionen und Überschriften stellen für assistierende Technologien Navigationsmechanismen innerhalb einer Webseite bereit.
• Navigationsmechanismen für den gesamten Webauftritt befinden sich insbesondere für Smart Phones in einem Popup-Fenster , das durch einen Burger-Schalter geöffnet werden kann.

Sichtbarer Inhalt als Voreinstellung?

Inhalte sollten aus Gründen der Nutzungsfreundlichkeit in der Regel beim Laden einer Seite sichtbar sein. Der kognitive Aufwand zum Wahrnehmen und Bedienen muss beim Surfen daher auf das Notwendige reduziert werden.

Zudem werden im details-Element verborgene Inhalte bei der Volltextsuche im Browser nicht gefunden. Versuche einmal die Zeichenfolge „Innsbruck“ mit STRG + F auf dieser Seite zu finden. Du wirst höchstwahrscheinlich keinen Treffer im folgenden Beispiel mit der Zeichenfolge im ausklappbaren Bereich finden:

Es kann daher zweckmäßig sein, Inhalte in einer ausklappbaren Komponente vorerst anzuzeigen. Dies gelingt in einer details-Komponente ganz einfach mit dem oben beschriebenen Attribut open.

Akkordeon aus details

Allein mit HTML kann ein barrierefreies Akkordeon aus details-Komponenten realisiert werden. Das Verhalten im Browser ist barrierefrei und entspricht den Nutzungserfahrungen im Browser. Zudem ist kein aufwendiges Programmieren mit JavaScript nötig.

Beispiele

Bild mit Detailbeschreibungen

Im folgenden Beispiel befindet sich unter einem Bild eine ausklappbare Komponente mit einer genaueren Beschreibung des Bildes. Der Alternativtext des Bildes ist sehr kurz gefasst („Goldenes Dachl“). Die Bildbeschreibung befindet sich in einem details-Element. Der Inhalt der Bildbeschreibung ist beim Laden automatisch sichtbar.

Bildbeschreibung

Das Goldene Dachl ist ein Prunkerker aus der Spätgotik. Das Foto zeigt einen Ausschnitt des Gebäudes mit dem namensgebenden Erkerdach und benachbarten Fensterreihen. Das trapezförmige Dach über dem Erker leuchtet golden im Sonnenlicht. Unter dem Dach befindet sich ein zweigeschoßiger Erker mit Reliefen an der Frontseite. Die benachbarten Fenster verfügen über hölzerne Fensterflügel. Darunter sind Blumenkisten angebracht.

Weitere Informationen finden Sie im Artikel auf Wikipedia zum Goldenen Dachl .

Diagramm mit Textalternativen

Im folgenden Beispiel befindet sich unter einem Diagramm eine ausklappbare Komponente mit der zugehörigen Datentabelle. Der Alternativtext für das Diagramm ist sehr kurz gefasst („Liniendiagramm Saisonale Nächtigungen“). Die Datentabelle für das Diagramm befindet sich in einem details-Element. Beim Laden der Seite ist die Datentabelle verborgen.

Datentabelle zum Diagramm

Saisonale Nächtigungen

Destination	Frühling	Sommer	Herbst	Winter
Atlantis	137.189	65.874	33.027	11.287
Bielefeld	107.203	66.390	110.973	53.047
Entenhausen	78.417	122.882	101.102	35.412
Hogsmeade	55.208	143.897	55.231	76.782

Ausblenden von bewegten Inhalten

Automatisch rotierende Bildkarusselle, Videos und Animationen stellen für viele Menschen eine belastende Irritation dar, wenn sie neben oder hinter Text erscheinen. Die WCAG reihen derartige Komponenten in die absoluten Störfaktoren ein. Sie sind gemäß Erfolgskriterium 2.2.2 jedoch zulässig, wenn sie über Mechanismen zum Pausieren, Anhalten oder Verbergen verfügen. Das Verbergen kann mit dem details-Element erfolgen.

Bewegung ausblenden

Ausblenden von störendem Inhalt mit dem details-Element.