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.

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">
  […]

Gruppieren der Ausklappmechanismen

Visuell ist ein Akkordeon weithin intuitiv als Gruppierung von Ausklappmechanismen erkennbar. Bei der linearen Wahrnehmung mit einem Screen Reader ist jedoch vor dem Betreten der Komponente nicht klar, was als Nächstes kommt. Technische Hinweise sollten daher auf die Eigenart der Komponente vorbereiten und das Ende der Komponente anzeigen. In diesem Abschnitt werden zwei Möglichkeiten vorgestellt, wie Akkordeons mittels ARIA für Screen Reader verständlich gemacht werden können.

Gruppieren mit Standardrolle

Zum Kennzeichnen einer Gruppe steht die ARIA-Rolle group zur Verfügung. Damit Screen Reader die Komponente tatsächlich darstellen, muss der Abschnitt mittels aria-label oder aria-labelledby beschriftet sein. Der HTML-Code sieht etwa folgendermaßen aus:

<section
  role="group"
  aria-label="[Thema]">
  <details>[…]</details>
</section>

Gruppieren mit Sonderrolle

Die Gruppenrolle ist sehr unspezifisch. Um redaktionell einem Element explizit eine bestimmte Rolle zuzuweisen, kann das Attribut aria-roledescription verwendet werden. Ob jedoch die Information "Akkordeon" für die Beschreibung der Komponente zum Verständnis beiträgt, muss mit dem Zielpublikum getestet werden.

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

<section
  aria-roledescription="Akkordeon"
  aria-label="[Thema]">
  <details>[…]</details>
</section>

Listensemantik

Einsatzüberlegungen

Da es sich bei einem Akkordeon um eine Liste aufeinander bezogener Elemente handelt, müssen die ausklappbaren Komponenten mit einer entsprechenden Semantik versehen werden.

Eine Listensemantik kann eine der oben beschriebenen Kennzeichnungen der Gruppierung ersetzen oder ergänzen. Tendenziell empfinden jedoch viele beim Arbeiten mit einem Screen Reader semantische Informationen als überbordend und nervig . Wenn aus dem Kontext ein Akkordeon als solches erkennbar ist und dessen Mechanismen bekannt sind, wird die Listenrolle für das Verständnis ausreichen.

Listenindikatoren entfernen

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>

Visuelle Darstellung

Mittels CSS-Anweisungen kann die Darstellung visuell und technisch optimiert werden. Das Verfahren zum Entfernen der Listenindikatoren wurde oben bereits vorgestellt. Weitere Möglichkeiten findest du in den Darstellungstipps zu den details- und summary-Elementen .

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.