Ausklappmechanismen (Accordions)

Technische Realisierung

Eine Komponente mit einen Ausklappmechanismus besteht aus zwei Elementen:

Ausklappschalter

Der Schalter zum Anzeigen und Verbergen von Inhalt. Er muss aussagekräftig beschriftet sein und technisch und grafisch den Mechanismus darstellen.

Erweiterter Inhalt

Der Inhalt, der dargestellt oder verborgen sein muss. Dieser Inhalt kann jegliche HTML-Elemente enthalten.

Ausklappmechanismus mittels HTML <details>

Ein Ausklappmechanismus wird durch das HTML-Element details in Kombination mit dem summary-Element visuell und technisch barrierefrei bereitgestellt. Es gibt aus der Perspektive der digitalen Barrierefreiheit also keinen Bedarf, einen Ausklappmechanismus für einen einzelnen Inhalt mit JavaScript zu realisieren. Die folgenden Hinweise zur technischen und visuellen Realisierung von ausklappbaren Komponenten sind daher nur zu berücksichtigen, wenn nicht das HTML-Standardelement verwendet wird.

Technische Kennzeichnung des Erweiterungszustandes

Für die Nutzung eines Screen Readers muss klar gemacht werden, dass ein Element ausklappbare Inhalte zur Verfügung stellt und ob diese gerade dargestellt sind. Technisch wird dies mit der ARIA-Eigenschaft aria-expanded sichergestellt.

Diese ARIA-Eigenschaft ist rein informativ. Der eigentliche Ausklappmechanismus muss über Scripts realisiert werden. Mit dem Code aria-expanded="false" wird an den Screen Reader weitergegeben, dass das Element ausklappbar, jedoch derzeit nicht ausgeklappt ist:

<button
 aria-expanded="false">
  [Schalterbeschriftung]
</button>

Tastaturbedienbarkeit von Ausklappmechanismen

Akkordeons müssen ohne Maus bedienbar sein.

Dazu muss ein Steuerelement zum Ausklappen und Einklappen mit der Tab-Taste fokussierbar sein. Dies gelingt durch Zuweisung einer Schalterrolle (HTML <button> oder ARIA role="button") Eine Linksemantik wäre für das Steuerelement irreführend, da es sich um keine Verlinkung zu einem Seitenbereich handelt.

Die Navigation zum nächsten Ausklappschalter kann dadurch mittels Tab erfolgen. Die Navigation zum vorherigen Ausklappschalter erfolgt mittels Umschalt+Tab.

Mit den Pfeiltasten ↓ und ↑ kann zwischen den Schaltern zum Ausklappen gewechselt werden. Wird der ausklappbare Bereich angezeigt, kann dieser durch ↓ betreten werden.

Überschriftensemantik für Ausklappschalter

Es ist selten zweckmäßig, den Ausklappschalter zusätzlich als Überschrift zu realisieren. Die Semantik eines Elements muss auf das Nötigste reduziert werden, um überbordende Metainformationen durch Screen Reader zu vermeiden. Navigationsmechanismen zum Ausklappschalter durch Überschriften-Markup könnten jedoch hilfreich sein, wenn sich im erweiterten Inhalt eine Vielzahl von fokussierbaren Elementen befindet.

Listensemantik für Ausklappschalter

Ausklappmechanismen werden vielfach in einer Sammlung von Ausklappschaltern angeboten. Denken wir etwa an eine Liste mit Fragen und Antworten ( Q&A ). Wenn mehr als drei Einblendschalter aufeinanderfolgen, empfiehlt es sich aus Gründen der Nutzungsfreundlichkeit für Screen Reader, dies auch semantisch in einer ungeordneten Liste darzustellen.

Visuelle Realisierung

Die spontane Erwartung beim Surfen dürfte im Hauptinhalt sein, dass relevante Inhalte standardmäßig angezeigt werden. Wenn Inhalte erst auf Knopfdruck eingeblendet werden, muss dies durch grafische Maßnahmen intuitiv verständlich gemacht werden.

Auf die Verfügbarkeit von zusätzlichem Inhalt wird in Browsern beispielsweise durch ergänzende Indikatoren zur Beschriftung des Schalters hingewiesen. Als Indikator dient vielfach ein nach rechts ausgerichtetes Dreieck (▸) oder ein Chevron beziehungsweise eine Pfeilspitze (⌄). Weiters eignen sich die Symbole + und − als visuelle Indikatoren für die Zustände ausklappbar beziehungsweise eingeklappt.

Platzieren von visuellen Indikatoren

Beim Arbeiten mit einer Vergrößerungssoftware wird nur ein Ausschnitt der Webseite angezeigt. Es ist daher fein, wenn sich die Symbolgrafik für einblendbare Inhalte unmittelbar an den Text der Überschrift anfügt und nicht rechtsbündig am Rand etwa eines Blocksatzes. Ansonsten kann der Hinweis leicht übersehen werden.

Nutzungsfreundlichkeit

Beim Einsatz von Akkordeons sollten gründliche Überlegungen zur Nutzungsfreundlichkeit getroffen werden. Dass auf einer Webseite Inhalte und Funktionalitäten hinzugefügt werden können, kann nicht in allen Bereichen als bekannt vorausgesetzt werden.

Don’t make me think!
(Bring mich nicht zum Nachdenken!)

Informative Inhalte sollten in der Regel standardmäßig sichtbar sein. Niemand sollte nötige Informationen verpassen oder unnötig zum Grübeln gebracht werden. Und auch die Volltextsuche findet verborgene Ausdrücke nicht.

Zur Navigation auf umfangreicheren Webseiten ist ein Inhaltsverzeichnis zweckmäßiger als den Inhalt in einem Akkordeon aufzubereiten. Folgende Nutzungsszenarien erscheinen jedoch für Mechanismen zum Aus- und Einklappen hilfreich oder angebracht:

„Häufig gestellte Fragen“ (F&A / FAQ / Q&A)

Es ist üblich und dürfte daher weithin bekannt sein, dass in einer Liste häufig gestellter Fragen zunächst nur die Fragen sichtbar sind und die Antworten durch einen Klick angezeigt werden.

Verbergen von Animationen

Animationen können ein massiver Störfaktor für die visuelle Wahrnehmung sein. Das Ausblenden von animiertem Inhalt wird im WCAG-Erfolgskriterium 2.2.2 als hinreichende Technik zur Erfüllung der Anforderungen angesehen.