HTML-Akkordeon

Mechanismus zum Ausklappen

Mit den HTML-Elementen details und summary kann ohne JavaScript eine Komponente erstellt werden, mit der zusätzliche Inhalte ein- und ausgeblendet werden. Die erforderlichen visuellen und technischen Indikatoren werden automatisch vom Browser bereitgestellt. Der Mechanismus erfüllt die Anforderungen an die Barrierefreiheit.

Zur Darstellung des ausgeklappten Inhalts empfiehlt sich der Einsatz eines Containers (div-Bereichs). Der Code kann daher etwa folgendermaßen aussehen:

<details>
  <summary>
    Zusätzlichen Inhalt ein- und ausblenden
  </summary>
  <div>
    <p>
      Ich bin der zusätzliche Inhalt.
    </p>
  </div>
</details>

Dieser Code wird in deinem Browser auf Zweiter Blick beispielsweise folgendermaßen dargestellt:

Akkordeon aus ausklappbaren Komponenten

Eine Gruppe von details-Elementen kann in HTML durch das name-Attribut mit einem typischen Mechanismus eines Akkordeons versehen werden. Der Wert für die zusammengehörigen Ausklappkomponenten muss jeweils gleich lauten. Das Öffnen einer ausklappbaren Komponente bewirkt damit das Schließen anderer Komponenten.

Ausklappmechanismen für Detailinformationen zu WCAG-Prinzipien können beispielsweise folgenderweise gruppiert werden:

<details
  id="wahrnehmbar"
  name="principle">
  […]
<details
  id="bedienbar"
  name="principle">
  […]

Listensemantik

Da es sich um eine Gruppe aufeinander bezogener Elemente handelt, müssen die ausklappbaren Komponenten als Liste realisiert werden. Dadurch können Screen Reader technisch die Anzahl der Elemente ermitteln und wiedergeben. Eine Listensemantik ermöglicht auch Navigationsmechanismen und verbessert die Nutzungsfreundlichkeit.

Visuell sollte intuitiv erkennbar sein, dass es sich um eine Liste handelt. Ein Aufzählungszeichen vor jedem Listenelement kann daher mittels CSS verborgen werden. Wegen eines Bugs geht dabei jedoch in Safari die Listensemantik verloren. Zur Behebung des Bugs sollte daher die Liste explizit mit der entsprechenden ARIA-Rolle versehen werden:

<ul
  style="list-style-type: none;"
  role="list">
  <li>
    <details name="principle">
      […]
    </details>
  </li>
  […]
</ul>

Darstellungstipps

Mittels CSS-Anweisungen kann die Darstellung visuell und technisch optimiert werden. Das Verfahren zum Entfernen der Listenindikatoren wurde oben bereits vorgestellt. Darüber hinaus stehen folgende Anweisungen zur Verfügung:

Visuelle Indikatoren

Browser stellen den Erweiterungszustand meist mit den Zeichen ▸ und ▾ vor dem Text des summary-Elements dar. 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. Aus kosmetischen Gründen empfiehlt sich daher das Chevron mittels SVG zu realisieren und mittels CSS einzubauen.

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)

Die visuelle Darstellung und die Ausgabe durch Screen Reader kann in CSS modifiziert werden. Dazu werden auf Zweiter Blick folgende Maßnahmen getroffen:

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

  MDN | ::marker

• Mit dem CSS-Selektor [open] wird der Indikator für den geöffneten Zustand festgelegt.

  MDN | <details>: The Details disclosure element

• Mit der CSS-Anweisung content: url([Pfad]) wird jeweils die Bilddatei für den Indikator referenziert.

  MDN | content

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

  MDN | content #alternative text

Die CSS-Anweisungen sehen insgesamt etwa folgendermaßen aus:

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

Ergänzter Inhalt

Es empfiehlt sich, ausklappbare Inhalte in einen div-Container einzubetten. Auf diese Weise lassen sich Darstellungsoptionen im CSS-Code einfacher realisieren. 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; 
}

Ergebnis

Hier kannst du das Akkordeon aus den angeführten Rezeptangaben und den allgemeinen CSS-Anweisungen für Darstellungsdetails auf Zweiter Blick in deinem Browser testen. Klicke dazu mit der Maus, navigiere mit Tabulator und ↓ beziehungsweise ↑ und aktiviere mit Enter oder Leertaste zum Aus- und Einklappen.