Ausklappmechanismen (Accordions)

Bedeutung von Accordions

Was sind Accordions?

Accordions sind Bedienungselemente, die Inhalte auf Webseiten mit einem Klick auffächern. Üblicherweise erscheinen sie als Sammlung von Überschriften, deren Inhalt erweiterbar ist. Auf diese Weise erlauben sie rasch Seiteninhalte ohne Scrollen zu erreichen.

Relevanz von Accordions für das barrierefreie Web Design

Accordions können das Navigieren auf einer Webseite alleine mit der Tastatur erleichtern. Es genügt ↓ zu drücken, um einen Block zu umgehen.

Bei der Nutzung eines Screen Readers hingegen sind ausklappbare Seiteninhalte als Navigationsmechanismus nicht nötig, wenn Überschriften adäquat eingesetzt werden. Sie können sogar zu Verwirrung führen, insbesondere wenn die erforderlichen ARIA-Anweisungen nicht ausreichend und korrekt eingesetzt werden.

Bei der visuellen Nutzung von Webinhalten ist es wichtig, dass ausklappbare Seiteninhalte auch als solche erkannt werden. Ich muss ohne viel Nachdenken sehen, dass ich mit einem Klick zu weiteren Inhalten komme.

Begriffsbestimmungen

Überschrift des Akkordeons (Accordion Header):

Einerseits Beschriftung, andererseits Steuerelement zum Ein- und Ausblenden der Zusatzinformationen.

Erweiterungsbereich Expandable Region / Accordion Panel:

Inhalte und Funktionalitäten, die ein- und ausgeblendet werden können.

Gruppieren von ausklappbaren Seiteninhalten

Sind untereinander mehr als drei Fächer eines Akkordeons angeordnet , sollte das Akkordeon semantisch gruppiert werden. Dafür stehen folgende semantische Optionen zur Verfügung:

Liste

<ul style="list-style-type: none;" >
  <li><button>Fächer 1</button></li>
  <li><button>Fächer 2</button></li>
  …
</ul>

Region

<div aria-label="[Technische Beschriftung des Akkordeons]"
  role="region">
  <button>Fächer 1</button>
  <button>Fächer 2</button>
  …
</div>

Visuelle Wahrnehmbarkeit der Verfügbarkeit von ausklappbaren Seiteninhalten

Bedeutung visueller Indikatoren

Die spontane Erwartung beim Surfen dürfte im Hauptinhalt sein, dass relevante Inhalte standardmäßig angezeigt werden. Auch Navigationsbereiche verfügen nicht immer über Unternavigationspunkte zu einem Navigationspunkt. Wenn Inhalte erst auf Knopfdruck eingeblendet werden, muss das zunächst durch grafische Maßnahmen intuitiv verständlich gemacht werden.

Visuelle Indikatoren für ausklappbare Seiteninhalte

Häufig werden zur visuellen Kennzeichnung von Unterbereichen nach unten zeigende Elemente eingesetzt, wie im folgenden Beispiel:

Als weiterer häufig verwendeter visueller Indikator zum Ausklappen wird ein Chevron-nach-unten verwendet. Dies ist eine doppelte oder dreifache stumpfe Spitzklammer, wie im der Symbolgrafik zu diesem Abschnitt links dargestellt.

Weiters eignen sich die Symbole + und − als visuelle Indikatoren für die Zustände erweiterbar bzw. eingeklappt. Ein umfangreiches Work Around findet sich auf ↓ inclusive-components.design.

Tipps zur technischen Umsetzung der Darstellung

Hintergrundgrafiken als visuelle Indikatoren

Wenn der visuelle Indikator als Hintergrundgrafik eingeblendet wird, muss vom Bildschirm verborgen eine textliche Alternative etwa in der Form [ausklappen] implementiert werden. Bei deaktivierten Stylesheets wird so die textuelle Alternative angezeigt.

Leider funktioniert dieser Trick nicht auch bei aktiviertem Windows Kontrastmodus.

Da die Erweiterungsmöglichkeit für Screen Reader ohnedies technisch mittels aria-expanded-Anweisungen erfolgen muss, sollte die textuelle alternative mittels aria-hidden="true" gänzlich verborgen werden.

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.

Tastaturbedienbarkeit von Accordions

Accordions müssen natürlich auch ohne Maus bedienbar sein. Zentral sind dabei Navigationsmechanismen mittels Tabulator- und Pfeiltasten und Aktionen mittels Leertaste oder Entertaste.

Der technische Report der WAI sieht optional weitere Tastaturbefehle vor. Ich erachte diese als wenig bekannt und gebräuchlich und daher auch nicht als dringlich notwendig:

Keyboard Interaction - Techniktipps der WAI

Screen Reader Funktionalitäten

Bedeutung der Screen Reader Wahrnehmbarkeit

Dass sich erweiterbarer Inhalt über ein Element steuern lässt, bleibt bei der Nutzung von Screen Readern ohne besondere Maßnahmen unbemerkt. Natürlich könnte ein visuell sichtbarer Hinweis mit einem Alternativtext für die Grafik Verständlichkeit schaffen. Sauberer ist es jedoch, ARIA-Funktionalitäten zu verwenden.

Zudem empfiehlt es sich, die Rolle der einzelnen Elemente adäquat mit einer HTML-Syntax oder verfügbaren ARIA-Anweisungen zu versehen. Ein Link ist etwas anderes als ein Schalter und wird von Screen Readern auch mit unterschiedlichen Funktionalitäten versehen.

Technische Realisierung der Akkordeon Überschriften

Die Überschriften des Akkordeons müssen zunächst semantisch als Überschriften realisiert werden. Dazu empfiehlt sich der Einsatz von HTML- Markup für Überschriften und eine konsistente Überschriftenhierarchie. Auf diese Weise können die gewohnten Tastaturmechanismen zur Navigation angewendet werden.

Der Text der Überschrift sollte entweder in einem HTML <button> dargestellt werden oder in einem Element mit role="button". Ein Link stattdessen könnte in die Irre führen, da der Schalter ja nicht zu einer anderen Seite oder einem anderen Seitenbereich führt.

Technische Kennzeichnung des Erweiterungszustandes

Bei der Nutzung eines Screen Readers muss klar gemacht werden, dass ein Element ausklappbare Inhalte zur Verfügung stellt und ob diese gerade dargestellt sind. Technisch kann dies sauber mit dem ARIA Befehl aria-expanded sichergestellt werden.

Der Code könnte also folgendermaßen aussehen:

<button aria-expanded="false">
  Überschrift
  <span
    aria-hidden="true"
    title="Zusatzinfos durch Klicken">
    &#9660;
  </span>
</button>

Erläuterungen zum Codebeispiel für Screen Reader Wahrnehmbarkeit

• Mit dem Attribut aria-expanded="false" im einleitenden TAG wird an den Screen Reader weitergegeben, dass das Element ausklappbar und derzeit nicht ausgeklappt ist.
• Mit der HTML Markierung ▼ wird ein schwarzes, nach unten zeigendes Dreieck (▼) angezeigt, dass von JAWS auch als solches interpretiert wird. Hier könnte natürlich auch ein anderes adäquates Symbol oder eine Grafik stehen.
• Durch das Attribut aria-hidden="true" werden die durch das Attribut aria-expanded für Screen Reader mittlerweile unnötigen Informationen ausgeblendet, die mit dem nach unten zeigenden Dreieck verbunden sind.

Referenzieren auf den Erweiterungsbereich

Mittels aria-controls kann von einem Steuerelement mittels ID auf den Erweiterungsbereich referenziert werden.

Zur Präzisierung der Empfehlungen der ↓WAI sollte bei Akkordeons auf dieses Attribut verzichtet werden, wenn sich der Erweiterungsbereich im DOM unmittelbar unter der Überschrift mit dem Steuerelement befindet. Wir kommen mit ↓ ohnedies in den Erweiterungsbereich, sofern dieser gerade ausgeklappt ist.

Deaktivierte Überschriften von Akkordeons

Umfangreichere Formulare werden gelegentlich mittels Akkordeons realisiert, um einen Fortschritt darzustellen und zu steuern. Erfordert der Ausfüllfortschritt eine bestimmte Reihenfolge werden einzelne Akkordeons zwischenzeitlich deaktiviert. Diese Elemente erhalten die Anweisung aria-disabled="true".

aria-disabled auf der WAI

Verschachtelte Akkordeons

Befinden sich innerhalb eines Erweiterungsbereichs wiederum verschachtelte oder komplexere Elemente, kann bei der Erarbeitung mittels Screen Reader leicht der Überblick verloren gehen. Solche Komplexitäten sollten daher möglichst vermieden werden.

Wenn sich die Verschachtelungen nicht vermeiden lassen, sollten folgende Maßnahmen berücksichtigt werden:

1. Achte auf eine korrekte semantische Verwendung der Elemente, insbesondere bei Überschriften und Listen.
2. Achte auf eine präzise Beschriftung der Elemente.
3. Überlege, ob Landmark Rollen das Verständnis bei einer linearen Wahrnehmung erleichtern könnten.
4. Vergib prägnante Beschriftungen von Bereichen mittels aria-label-Anweisungen..
5. Überlege, ob eine größere Anzahl von Subelementen mittels aria-labelledby-Anweisung zur Überschrift des Akkordeons referenziert werden sollte.

Useability - Die Verständlichkeit der Funktionalität

Beim Einsatz von Akkordeons sollten gründliche Überlegungen zur Useability 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! ist ein zentrales Schlagwort für das Useability Engineering, die gezielte Entwicklung von möglichst benutzerfreundlichen Elementen im Design. Visuell und technisch müssen Akkordeons entsprechend intuitiv wahrnehmbar und in ihren Funktionalitäten bekannt sein.

Ein weiteres bedenkenswertes Schlagwort des Useability Engineering ist: Know Thy Client!. Beim Einsatz von Akkordeons sollte dieses Prinzip insbesondere auf Bereichen kritisch geprüft werden, die auch für Menschen mit Lernbeeinträchtigungen gedacht sind. Selbst visuelle Indikatoren könnten die Funktionalität nicht verständlich machen. Relevante Inhalte sollten daher möglicherweise permanent dargestellt sein.

Zur Navigation von umfangreicheren Webseiten ist in der Regel ein Inhaltsverzeichnis zweckmäßiger.

Kriterien für den Einsatz von Akkordeons

Folgende Fragen sollten diskutiert werden, bevor ein Akkordeon eingesetzt wird:

• Sind die Funktionalitäten eines Akkordeons der Zielgruppe bekannt?
• Erleichtert ein Akkordeon eher die Bedienbarkeit für die Zielgruppe oder für bestimmte Devices als dass es sie erschwert?
• Sind andere Funktionalitäten zur Navigation verfügbar (Verlinktes Inhaltsverzeichnis, Überschriftenmechanismen, …)?
• Dient ein Akkordeon an dieser Stelle tatsächlich dazu, die Seite und deren Bedienung übersichtlicher zu machen?
• Was wäre, wenn an dieser Stelle kein Akkordeon verfügbar wäre?

Beispiele für den Einsatz von aufklappbaren Elementen

Verwendung der Beispiele

Ich habe hier ein paar interessante Beispiele für den Einsatz von aufklappbaren Seitenbereichen gesammelt. Allesamt können Fehler bei der technischen Umsetzung oder der Useability enthalten. Ich freue mich über entsprechende Hinweise per Mail oder als Kommentar zu dieser Seite.

Für Webinhalte, zu denen ich im Folgenden extern verlinke, kann ich natürlich keine Garantien für Aktualität und Fehlerfreiheit abgeben. Sie können sich nach meinem letzten Besuch in Relevanz, Inhalt und Funktionalität geändert haben. Ich kann daher diese Seiten nur bedingt als Anregung für die eigenen Reflexionen und Entwicklungen vorschlagen.

Accordion Example | WAI-ARIA Authoring Practices 1.1

Ein sehr sauber programmiertes und dokumentiertes Beispiel eines Akkordeons für Formuilare, aber wohl auch für andere Anwendungen.

Zusammenfassende Empfehlungen

1. Die Vorteile für den Einsatz von Accordions müssen im Hinblick auf die Useability klar gegenüber den Bedenken überwiegen.
2. Die Überschriften benötigen visuell deutlich wahrnehmbare, intuitiv verständliche und wieder erkennbare Symbolgrafiken oder Zeichen für das Angebot des Ein- und Ausblendens.
3. Die Überschriften benötigen für Screen Reader wahrnehmbare Mechanismen für das Angebot des Ein- und Ausblendens.
4. Die Funktionalitäten mittels Mausbedienung müssen auch für die Tastaturbedienung bereitgestellt werden.
5. Die unmittelbare Navigation zwischen den Überschriften muss gewährleistet sein. Zugehörige Inhalte müssen also mit Tastaturbefehlen übersprungen werden können.