Wie sieht eigentlich eine barrierefreie Website aus? Hier finden sich ein paar Beispiele für Seiten, die es gut machen.
Im Artikel „Beispiele für die Barrierefreiheit im Web: 5 Webseiten, die es richtig machen“ beschreibt James Sheasby Thomas 5 Websites, die im Bezug auf Barrierefreiheit mit guten Beispiel vorangehen.
Hier eine kurze Zusammenfassung, welche Website in welcher Hinsicht besonders herausstechen.
Scope
Scope.org.uk, die Website der Organisation für Behindertengleichstellung Scope, ist Vorreiter in Sachen Barrierefreiheit und hinsichtlich der Bedienung mit der Tastatur geht.
Features:
- Ein tolles Beispiel für Skiplinks: Es gibt gleich 3 direkte Links: einmal zum Hauptinhalt, einmal zur Suche und einmal zur Navigation
- Guter Fokus beim Navigieren mit der Tab-Taste
- Große und hochauflösende Bilder
- Große Schriftgröße, großer Zeilenabstand, deutlich gestaltete Schaltflächen
- Deutlich gekennzeichneter und leicht zu erreichender Link zur „Accessibility“-Seite ganz oben
- Guter Inhalt der „Accessibility“-Seite, mit Erwähnung von nützlichen Tools
SSE Energy
Das Energiegeschäft von SSE hat einen Großteil seiner Bemühungen um die Zugänglichkeit bei den Online-Anmeldungen konzentriert, da diese die wichtigste und profitabelste User Experience auf der Webseite darstellen. Ein Grund der Anpassungen waren der älter werdende Kundenstamm.
Features:
- Überarbeitung der Unternehmensfarben für ein besseres Kontrastverhältnis
- Zugänglichkeitstests mit realen Kunden
- Klares, sauberes, leicht navigierbares Design
- Tabbing für reine Tastaturbenutzer: auffällige Schaltfläche „Zum Inhalt springen“ auf dem zweiten Tab
- Gute Code-Struktur und Achten auf Alt-Text für Nicht-Text-Elemente
BBC
Das Digital-Team der BBC ist ein starker Befürworter eines integrativen Designs.
Features:
- Stellt den Menschen in den Mittelpunkt
- Schaffen von Mehrwert für Menschen mit Behinderungen
- Schaffen von Vertrautheit durch Konsistenz
- Kontrolle über Inhalte an den User
- Mehrere Methoden zur Interaktion mit den Interface-Komonenten
- Links „Zum Inhalt springen“ und „Accessibility Help“
- Viele kleine A11y Verbesserungen (versteckter Text für Screenreader-Nutzer, genaue Zeitmarken auf Artikel-Promos, erweiterte Beschriftungen neben Freigabesymbolen)
- Keine benachbarten Links, die auf dieselbe Seite verweisen
- Website hat gutes responsive Verhalten (sehr gut für z. B. Zoomen)
- Die Ausshängeschilder BBC iPlayer und BBC Sounds sind für Screenreader, Tastaturen und alternative Eingabegeräte optimiert
- Alle iPlayer-Programme sind mit Untertiteln versehen, und die Benutzer können über die Kategorienavigation beschriebene und signierte Sendungen finden
GOV.UK
Insgesamt ist die Website von GOV.UK ein großartiges Beispiel für Accessibility und integratives Design. Die Erklärung zur Zugänglichkeit und die Dokumentation des Designsystems zeigen das Engagement für einen gleichberechtigten Zugang
Features:
- Semantisches und gut strukturiertes HTML
- Verbesserungen für Screenreader- und Tastaturbenutzer
- Gute Formular, z. B. Feedback-Formulare in der Fußzeile, die sich hinter zwei Links verstecken, nutzen die ARIA-Attribute, um Screenreader-Benutzern zu helfen, das richtige Formular zu finden und es korrekt auszufüllen
- Links ‚Nein‘ und ‚Stimmt etwas nicht mit dieser Seite?‘ haben
aria-controlsandaria-expanded=”false”Attribute, um anzuzeigen, dass sie einen nahegelegenen Abschnitt der Seite steuern, der derzeit versteckt ist. - Weitere gut durchdachte Verwendung von ARIA Attributen an diversen Stellen
- Alternative Formate für numerische Daten und Statistiken (Link „Change between chart and table“)
Monzo
Die beliebte, ausschließlich auf Mobiltelefone spezialisierte Bank Monzo strebt danach, die Zugänglichkeit in den Mittelpunkt zu stellen, um eine außergewöhnliche Customer Experience für alle zu schaffen.
Die Bank ist im Moment dabei, die Website in Richtung Barrierefreiheit zu verbessern und teilt dies in einem Blog-Post mit.
Hier teilt Monzo einige der schrittweisen Veränderungen, um ihre Dienstleistungen für Kunden mit Zugänglichkeitsanforderungen besser zu gestalten. Von der Überprüfung und Überarbeitung von Bild- und Textbeschreibungen bis hin zur Neugestaltung des Blogs und dem Aufbau von Component Bibliotheken für mehr Konsistenz.
Weitere gute Websites
Stadtbibliothek Neuss
Die Stadtbibliothek Neuss verwendet WordPress und die Website ist laut BIK bitv-konform. Sie verfügt gute Skip-Links (z. B. sehr gut: Slider überspringen), gute Fokus-Anzeige, große Schrift, klare Aufteilung.
Die Website wurde von der Agentur anatom5 geprüft, welche ebenfalls eine sehr gute Website haben.
Eurowings
Ein sehr gutes Beispiel für Benutzbarkeit ist der Fluganbieter Eurowings.
- Cookie-Banner per Tastatur gut benutzbar
- Slider sehr verständlich für Screenreader (getestet mit VoiceOver)
- Formular sehr gut umgesetzt, mit viel zusätzlicher Info für Screenreader (getestet mit VoiceOver)
Zum Zeitpunkt des Tests hat nur die Überschriften-Hierarchie nicht ganz gestimmt.
Fazit
Wie diese Beispiele für die Barrierefreiheit zeigen, müssen nicht auf ein attraktives Webdesign verzichten werden, um das Leben für Website-Benutzer mit Zugänglichkeitsanforderungen zu erleichtern. Diese und zahllose andere Beispiele veranschaulichen, dass die Konzentration auf die Accessibility tatsächlich zu universellen Verbesserungen der Usability führt, die allen Ihren Kunden gleichermaßen zugute kommen.
Wichtig ist allerdings, dass man Prozesse integriert, damit Websites auch barrierefrei bleiben, da sich sonst Fehler einschleichen können, wie z. B. eine fehlerhafte Überschriften-Hierarchie oder fehlende Labels bei Formularen.
Quelle: Beispiele für die Barrierefreiheit im Web: 5 Webseiten, die es richtig machen, James Sheasby Thomas