Akkordeons sind beliebte Komponenten im Design von Webseiten, um Inhalte platzsparend und strukturiert präsentieren zu können. Doch ohne eine entsprechende barrierefreie Umsetzung können sie für viele Nutzer zur Barriere werden. Dieser Beitrag fasst für dich zusammen, wie wir Akkordeons barrierefrei nach den Web Content Accessiblity Guidelines (abgekürzt: WCAG) gestalten.
Die Funktionsweise von Akkordeons auf Webseiten
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Stelle dir ein Akkordeon wie eine Art digitalen Aktenschrank vor. Du siehst zunächst nur die Überschriften oder Themen, meist mit einem kleinen Pfeil daneben. Wenn du auf eine dieser Überschriften klickst, klappt sich der Bereich darunter auf. Ganz ähnlich wie eine Schublade, welche du aus dem digitalen Aktenschrank herausziehst. Dort erscheint dann der zugehörige Inhalt, zum Beispiel ein Text, ein Bild oder eine Liste. Klickst du erneut auf die Überschrift, schließt sich der Bereich wieder. Solche Akkordeons sind vermehrt auf „Häufige-Fragen“-Seiten eingebaut, wo zunächst nur die Fragen sichtbar sind. Erst wenn du eine Frage anklickst, wird die Antwort eingeblendet. Auch in Online-Shops werden Akkordeons gerne verwendet, etwa um Produktbeschreibungen, Lieferinformationen oder Bewertungen übersichtlich darzustellen.
Potenzielle Barrieren durch die Verwendung von Akkordeons
Akkordeons können verschiedene Nutzergruppen vor Herausforderungen stellen. Nachstehend werden wesentliche Gründe von potenziellen Barrieren bei der Verwendung von Akkordeons für diese Nutzergruppen zusammengefasst.
Potenzielle Barrieren für Screenreader-Nutzer
Menschen, die Screenreader verwenden, also Programme die den Bildschirminhalt vorlesen, stehen vor besonderen Herausforderungen. Wenn ein Akkordeon nicht richtig gekennzeichnet ist, wissen sie nicht, dass sich dahinter weiterer Inhalt verbirgt. Oft ist auch unklar, welcher Knopf zu welchem Inhalt gehört. Besonders problematisch wird es, wenn der Screenreader nicht mitteilt, ob ein Bereich gerade auf- oder zugeklappt ist oder wenn Änderungen dieses Zustands nicht angesagt werden.
Potenzielle Barrieren für Menschen, welche Webseiten mit der Tastatur bedienen
Für Menschen, die ausschließlich die Tastatur zur Navigation nutzen, entstehen andere Probleme. Manchmal lassen sich die Bedienelemente gar nicht mit der Tastatur erreichen, oder es ist nicht erkennbar, das man sie mit der Tastatur bedienen soll. Ein weiteres häufiges Problem ist, dass nicht erkennbar ist, wo man sich gerade auf der Seite befindet, weil eine sichtbare Markierung des aktuell angesteuerten Elements fehlt.
Potenzielle Barrieren für Menschen mit motorischen Einschränkungen
Menschen mit eingeschränkter Beweglichkeit in den Händen haben oft Schwierigkeiten, wenn die klickbaren Bereiche zu klein sind. Stelle dir vor, du müsstest mit zitternden Händen auf einen winzigen Pfeil klicken – das kann sehr frustrierend sein. Die Bedienelemente sind eventuell auch ungünstig platziert, sodass sie eher schwer zu erreichen sind.
Potenzielle Barrieren für Menschen mit kognitiven Einschränkungen
Für Menschen mit kognitiven Einschränkungen können Akkordeons ebenfalls Probleme bereiten. Wenn die Beschriftungen unklar sind, wissen sie nicht, welche Inhalte sich hinter den einzelnen Bereichen verbergen. Oft fehlen auch eindeutige visuelle Hinweise, die zeigen, wie man die Akkordeons bedienen soll. Besonders verwirrend wird es, wenn sich Akkordeons an verschiedenen Stellen unterschiedlich verhalten – mal klappt ein Bereich auf, wenn man darauf klickt, mal passiert etwas ganz anderes.
Potenzielle Barrieren in Akkordeons gemäß WCAG erfolgreich beseitigen
All die eben genannten Barrieren können vermieden werden, wenn man bei der Gestaltung von Akkordeons von Anfang an an alle Nutzergruppen denkt und entsprechende technische Lösungen einsetzt.
Um Akkordeons wirklich für alle Menschen zugänglich zu machen, müssen wir verschiedene Richtlinien der WCAG beachten. Diese Richtlinien helfen uns dabei, die Bedienbarkeit Schritt für Schritt zu verbessern.
Korrekte Überschriftenreihenfolge
Zunächst ist es wichtig, dass die grundlegende Struktur der Webseite stimmt. Das bedeutet, wir müssen die richtigen HTML-Elemente verwenden und sie sinnvoll miteinander verbinden. Stelle dir diese Struktur wie ein gut sortiertes Bücherregal vor: Jedes Buch hat seinen festen Platz und eine klare Beschriftung. Genauso müssen auch die Überschriften der Akkordeons im Kontext der Seitenstruktur in einer logischen Reihenfolge angeordnet sein, damit man sich gut orientieren kann.
Tastaturbedienbarkeit
Die Tastatursteuerung spielt eine besonders wichtige Rolle. Jeder Bereich des Akkordeons muss mit der Tastatur erreichbar sein, und zwar in einer Reihenfolge, die Sinn ergibt. Das ist wie bei einem Formularvordruck, bei dem du von Feld zu Feld springst – du möchtest ja auch nicht wild hin und her springen müssen.
Die Tastaturbedienbarkeit entwickeln wir gemäß dem WCAG Erfolgskriterium 2.1.1. Mehr Informationen zu dem Erfolgskriterium 2.1.1 (in englischer Sprache). Außerdem berücksichtigen wir das offiziell empfohlenen Verhalten. Mehr zum offiziell empfohlenen Verhalten von Akkordeons gemäß WCAG (in englischer Sprache)
Fokusreihenfolge
Besonders wichtig ist auch, dass man immer sehen kann, wo man sich gerade auf der Seite befindet. Stelle dir vor, du suchst etwas in einem dunklen Raum und ein Lichtstrahl, der auf den aktuellen Bereich zeigt, wäre da sehr hilfreich. Genauso muss auf der Webseite immer klar erkennbar sein, welches Element gerade ausgewählt ist. Diese Markierung des fokussierten Elements muss sich deutlich vom Rest der Seite abheben und überall gleich aussehen.
Die Fokusreihenfolge entwickeln wir gemäß dem WCAG Erfolgskriterium 2.4.3. Mehr Informationen zu dem Erfolgskriterium 2.4.3 (in englischer Sprache). Außerdem berücksichtigen wir das WCAG Erfolgskriterium 2.4.7. Mehr Informationen zu dem Erfolgskriterium 2.4.7 (in englischer Sprache)
Eindeutige Beschriftungen
Damit Menschen mit Screenreadern die Akkordeons gut nutzen können, braucht jedes Element einen eindeutigen Namen und eine klare Rolle. Der Screenreader muss auch immer ansagen, wenn sich etwas auf der Seite ändert. Das ist wie ein guter Moderator, der alle Änderungen klar und verständlich ankündigt. WAI-ARIA ist dabei wie eine zusätzliche Sprache für Screenreader, mit der wir wichtige Informationen über die Bedienelemente mitteilen können. Stelle dir das wie Untertitel bei einem Film vor, die zusätzliche Informationen liefern. Mit WAI-ARIA können wir zum Beispiel dem Screenreader mitteilen, dass ein Element ein aufklappbarer Button ist, ob er gerade geöffnet oder geschlossen ist, und welcher Inhalt zu diesem Button gehört.
Wenn wir als weiteres Beispiel einen Akkordeon-Button mit „Weitere Informationen“ beschriften, ist das für sehende Nutzer vielleicht ausreichend, weil sie den Kontext sehen können. Für Screenreader-Nutzer sollte die Beschriftung aber spezifischer sein, etwa „Weitere Informationen zu Versandkosten“. WAI-ARIA ermöglicht uns, solche zusätzlichen Beschreibungen speziell für Screenreader bereitzustellen, ohne das visuelle Design zu verändern.
Für eindeutige Beschriftungen halten wir uns an das empfohlenen Verhalten. Mehr zum offiziell empfohlenen Verhalten von Akkordeons gemäß WCAG (in englischer Sprache). Außerdem berücksichtigen wir das WCAG Erfolgskriterium 4.1.2. Mehr Informationen zu dem Erfolgskriterium 4.1.2 (in englischer Sprache)
Konsistentes Verhalten
Für eine rundum gute Nutzererfahrung sollten sich die Akkordeons überall auf der Webseite gleich verhalten. Animationen sollten sanft und vorhersehbar sein. Die Webseite muss auch funktionieren, wenn JavaScript ausgeschaltet ist oder ein älterer Browser verwendet wird. Außerdem sollten sich die Inhalte an verschiedene Bildschirmgrößen anpassen und die Schriftgröße sollte veränderbar sein. Klare Rückmeldungen, zum Beispiel wenn sich ein Bereich öffnet oder schließt, helfen allen Nutzern bei der Orientierung.
Mit konsistentem Verhalten erfüllen das WCAG Erfolgskriterium 3.2.4. Mehr Informationen zu dem Erfolgskriterium 3.2.4 (in englischer Sprache)
Zusammenfassung
Wenn wir Akkordeons auf Webseiten wirklich für alle Menschen zugänglich machen wollen, müssen wir von Anfang an sorgfältig planen. Das ist wie beim Hausbau – ein gutes Fundament ist die Basis für alles Weitere. Dieses Fundament besteht aus drei wichtigen Bausteinen: Zum einen brauchen wir eine klare, saubere HTML-Struktur, die wie ein gut durchdachter Bauplan ist. Zum anderen benötigen wir spezielle technische Ergänzungen, die WAI-ARIA genannt werden. Sie sind wie ein Navigationssystem, das Menschen mit Screenreadern durch die Webseite führt. Der dritte Baustein sind durchdachte Bedienungsmuster und ein klares Design, die dafür sorgen, dass sich die Webseite für alle Nutzer einheitlich und vorhersehbar verhält.
Besonders wichtig ist es auch, die fertige Webseite immer wieder zu testen und zu verbessern. Die regelmäßige Überprüfung und Anpassung sorgt dafür, dass die Webseite nicht nur heute, sondern auch in Zukunft für alle Menschen gut nutzbar bleibt. Denn genau wie ein Haus regelmäßige Pflege braucht, muss auch eine Webseite kontinuierlich gepflegt und verbessert werden.
