Barrierefreie Webseiten haben bisher eher einen faden Beigeschmack.
Schließe deine Augen und denke an eine barrierefreie Webseite, was siehst du? Wahrscheinlich triste graue Blöcke, riesige Schrift und so wenig Bilder wie möglich. Man bekommt so ein nostalgisches, die “90’s are back”-Gefühl.
Warum ist das so? Weil das Geschäft bis vor Kurzem kein Geld gebracht hat. Die Leute wurden nicht dafür bezahlt, Dinge modern und trendy zu machen. Es war mehr eine funktionelle Aufgabe für die Regierung und öffentliche Stellen.
Darum zeigen wir dir hier ein paar Beispiele, wie moderne, barrierefreie Webseiten aussehen können. Wir haben drei Beispiele von privaten Unternehmen, aber auch zwei von öffentlichen Stellen, die auch verstanden haben, dass gutes Design wertvoll sein kann.
Beispiele barrierefreier Webseiten #1: Eurowings
Eurowings ist schon seit geraumer Zeit barrierefrei. Auch wenn ich in einem anderen Beitrag mal 2–3 Dinge an ihrer Seite bemängelt habe, sind sie trotz dessen ein hervorragendes Beispiel dafür, wie modern, übersichtlich und intuitiv barrierefreie Webseiten aussehen und aufgebaut sein können.
Wenn ihr die Startseite besucht, sehr ihr zum Beispiel, dass es dort die Möglichkeit gibt, den Slider anzuhalten. Die Möglichkeit das anzuhalten ist ein ziemlich nettes Feature für Barrierefreiheit. Laut einer Anforderung der WCAG für digitale Barrierefreiheit, muss es die Möglichkeit geben, Animationen zu stoppen (wenn sie länger als 5 Sekunden dauern). Genauer gesagt soll dem Nutzenden auf einer Webseite generell so viel Kontrolle wie möglich gegeben werden. Bei dem Slider kann er sich hier also selbst entscheiden, ob er ihn anhalten oder lieber laufen lassen will.
Hast du schon mal versucht, einen Text auf einem Slider zu lesen? Dann kannst du wahrscheinlich verstehen, warum die Möglichkeit, ihn anzuhalten, sehr positive Auswirkungen auf die Nutzererfahrung hat.
Hier könnt ihr die Webseite von Eurowings direkt besuchen.
Beispiele barrierefreier Webseiten #2: Wise
Wise hat Anfang 2023 eine Artikel-Serie darüber herausgebracht, wie sie ihr Design-System globaler und inklusiver gemacht haben. Es gibt ziemlich interessante Sachen darin zu lesen. Besonders die Auswahl und Kombination ihres Farbsystems fand ich verständlich erklärt. Hier geht es zum Artikel von Wise über ihr barrierefreies Design-System.
Durch diesen Artikel bin ich auch auf den sehr hilfreichen Farb-Checker APCA gestoßen. Dieser Farb-Checker kann am Anfang etwas überfordernd sein. Er gibt aber unter anderem eine sehr detaillierte Übersicht darüber, in welcher Schriftgröße ein Text geschrieben werden darf, um den nötigen Kontrast einzuhalten.
Wer keine Ahnung von Kontrasten hat, der sollte sich wahrscheinlich erst mal mit den Grundlagen auseinandersetzen. Danach sieht der APCA-Checker auf nicht mehr ganz so angsteinflößend aus. Hier ein Artikel zu den WCAG-Empfehlungen, was Kontrast angeht (Englisch).
Du willst herausfinden, wie du deine Webseite selbst auf digitale Barrierefreiheit prüfst?
Zusammen mit Marc Haunschild (15+ Jahre Erfahrung im Testen auf digitale Barrierefreiheit) zeigen wir dir, wie du deine Webseite und die deiner Kunden schnell und effektiv testen kannst.
Beispiele barrierefreier Webseiten #3: Apple
Apple macht so einiges richtig, auch die digitale Barrierefreiheit. Nicht nur die Webseite bzw. der Webshop von Apple ist barrierefrei, sondern auch vieles an ihren Geräten.
Das iPhone und MacBook besitzen zum Beispiel einen eingebauten Screenreader, den man mit dem Tastaturkürzel CMD+F5 aktiveren kann. Wer das selbst mal testen will, kann sich unserer Leistungs-Seite für Screenreader anschauen. Hier gehts zur Leistungs-Seite für die Screenreader-Erfahrung.
Außerdem können deine Apple-Geräte dir Dinge vorlesen, dynamisch die Typografie anpassen, sich deine Kontrast-Vorlieben merken und, du kannst dabei auch noch alles nur mit deiner Stimme steuern.
Wer sich eine Übersicht verschaffen will, was die Apple-Geräte für Barrierefreiheit alles mit sich bringen, kann sich hier umschauen: Artikel von Apple über die eigene Barrierefreiheit.
Apple ist, was Ästhetik angeht, immer ein Vorreiter und deswegen ist es noch besser zu sehen, dass digitale Barrierefreiheit bei ihnen gut funktioniert.
Beispiele barrierefreier Webseiten #4: Bundesministerium für Arbeit und Soziales
Weg von den spannenden Firmen, hin zur Bundesregierung! Auch die öffentlichen Stellen tun etwas für die digitale Barrierefreiheit. Nicht so viel, wie sie laut Gesetz eigentlich sollten oder müssten, aber immerhin passiert etwas. Und offen gesagt, sehen ein paar Dinge davon schon ziemlich gut aus!
Wenn du die Webseite des Bundesministeriums besuchst, fallen dir eventuell ein paar Dinge auf, die du auf den Firmen-Webseiten nicht gesehen hast. Es gibt auf diesen Seiten nämlich so Buttons für Gebärdensprache und leichte Sprache. Hier geht es zur Webseite des Bundesministeriums.
Öffentliche Stellen sind im Gegensatz zu privaten Firmen nämlich nicht nur dazu verpflichtet, sich an die Regelungen der WCAG zu halten, sondern an die, der BITV. Die BITV hat noch mal 30 extra Anforderungen, die beim Erstellen digitaler Auftritte beachtet werden müssen. Dazu zählt zum Beispiel, dass es möglich sein muss, die Webseite in leichter Sprache zu lesen. Das ist extrem hilfreich, für Menschen mit kognitiven Beeinträchtigungen.
Für öffentliche Stellen gelten also noch mal verschärfter Regeln, weil hier gewährleistet werden soll, dass wirklich alle Menschen die Chance haben, sich zu informieren.
Wie zuvor erwähnt, ist das allerdings vielen (noch) ziemlich egal. Wir haben uns dafür mal die Webseiten der Städte in Bayern und ihre digitale Barrierefreiheit angeschaut. Hier ist unser Artikel über die digitale Barrierefreiheit in Bayern.
Beispiele barrierefreier Webseiten #5: Bundesfachstelle Barrierefreiheit
Die Bundesfachstelle für Barrierefreiheit ist zum Glück auch selbst barrierefrei (das wär sonst peinlich geworden!).
Nach dem Anschauen ihrer Webseite will ich noch kurz auf das Thema Navigation eingehen. Wie du auf der Seite sehen wirst, gibt es im Header die Möglichkeit, die Suchfunktion zu nutzen und im Footer haben sie einen separaten Link zu ihrem Inhaltsverzeichnis.
Für größer Seiten (auch von Unternehmen) ist es ein Muss, dass es mehr als eine Möglichkeit zum Navigieren auf der Seite gibt. Das kann entweder eine Navigation plus eine Suche sein oder eine Navigation plus eine Sitemap oder wer fleißig sein will, eben alle drei Möglichkeiten.
Hier geht es zur Seite der Bundesfachstelle für Barrierefreiheit.
Und, wie mache ich meine eigene Webseite oder meinen Onlineshop barrierefrei?
Das, ist nicht so schwer, aber auch nicht so einfach. Digitale Barrierefreiheit ist so ein Ding, das ziemlich viel Wissen erfordert. Wir wollen und können hier keine „einfachen“ Tipps dafür geben. In unserem Blog gehen wir aber das Thema Stück für Stück an, um dir dabei zu helfen, beim Design, bei der Entwicklung und bei der Content-Erstellung barrierefreier zu werden.
Wer sich intensiv damit auseinandersetzen will, für den haben wir Workshops zu den einzelnen Themen vorbereitet: Übersicht unserer Workshops.
Fazit
Wie Eurowings, Wise und Apple und auch manche öffentlichen Stellen zeigen, kann digitale Barrierefreiheit ziemlich gut aussehen. Es gibt vielleicht ein paar moderne UI-Trends, auf die man verzichten sollte, wie zu viel Animationen oder zu viele Slider, aber das sind sehr geringen Einschränkungen für den Nutzen, den digitale Barrierefreiheit für alle bringen kann.
Wenn du dich bisher nicht intensiv damit auseinandergesetzt hast, welche Vorteile die digitale Barrierefreiheit dir bringen kann, können wir dir diesen Beitrag von uns empfehlen: Warum genau jetzt der richtige Zeitpunkt ist, barrierefrei zu werden.
