Top Beispiele für barrierefreie Webseiten

Barrierefreie Webseiten haben in Deutschland oft noch einen faden Beigeschmack. Viele Menschen stellen sich darunter eine triste, graue Website mit riesigen Texten und möglichst wenig Bildern vor. Das muss nicht sein, denn die offiziellen Richtlinien für barrierefreie Webseiten (engl. Web Content Accessibility Guidelines, kurz WCAG) geben Unternehmen und öffentlichen Stellen genügend Möglichkeiten, authentische, moderne und gleichzeitig barrierefreie Webseiten zu entwickeln. 

Im Folgenden stellen wir vier unserer besten Beispiele für barrierefreie Webseiten vor, die von allen Menschen ohne größere Schwierigkeiten und ohne fremde Hilfe genutzt werden können.

Das riesige US-Tech-Unternehmen aus den USA macht in Sachen digitaler Barrierefreiheit bereits vieles richtig. Neben einer barrierefreien Website und einem barrierefreien Online-Shop integriert Apple jährlich neue Funktionen in seine Geräte, um eine barrierefreie Nutzung zu gewährleisten.

So verfügen alle iPhones und MacBooks über eine integrierte VoiceOver-Funktion, mit der Sie sich Texte auf dem Bildschirm oder Ihre Texteingaben vorlesen lassen können. Wie Sie diese Funktion auf Ihrem iPhone aktivieren, erfahren Sie im folgenden Artikel von Apple: iPhone Benutzerhandbuch

Darüber hinaus können Apple Geräte die Schriftgröße bestimmter Apps dynamisch anpassen, sich Kontrast-Einstellungen merken oder das Smartphone von der Sprachassistentin Siri steuern lassen.

Eine Übersicht über alle Funktionen, die Apple in seinen Geräten für eine barrierefreie Nutzung integriert hat, finden Sie im folgenden Artikel: Apple Accessibility

Wise, ehemals TransferWise, ist ein britisches FinTech-Unternehmen, das sich auf internationale Geldtransfers spezialisiert hat und schnelle Überweisungen in verschiedene Währungen anbietet.

Im vergangenen Jahr hat Wise sein neues Rebranding veröffentlicht und dabei ein barrierefreies und inklusives Design-System entwickelt, das für alle zugänglich und gleichzeitig visuell ansprechend ist. Ein zentrales Element des neuen Markenauftritts ist die komplett neu gestaltete Farbpalette, die für alle Menschen gut wahrnehmbar ist und alle Kontrast-Richtlinien der Web Content Accessibility Guidelines (WCAG) berücksichtigt.

Diese besagen, dass große Texte wie etwas Überschriften und interaktive grafische Elemente mindestens ein Kontrastverhältnis von 3:1 zwischen Vorder- und Hintergrundfarbe aufweisen müssen, damit auch Menschen mit Behinderungen Texte und Bilder auf der Webseite wahrnehmen können.

Während des gesamten Reranding-Prozesses wurde die Farbpalette immer wieder mit Tools wie Contrast Checker (von WebAIM) oder dem Figma Plugin Color Blind Simulator getestet. Darüber hinaus wurde bereits in der Konzeptionsphase viel Empathie für alle Zielgruppen entwickelt, um deren Wünsche und Bedürfnisse zu verstehen und ein inklusives Webdesign zu entwickeln.

Den vollständigen Artikel von Wise zum Rebranding-Prozess finden Sie hier. Einen Überblick über das neue Branding finden Sie auf der Landingpage der Designabteilung von Wise.

Anlässlich des 75. Geburtstag hat Porsche letztes Jahr neben seinem ikonischen Wappen auch die Webseite und den Onlineshop modernisiert. Außerdem wurde eine neue Version des Design Systems mit barrierefreien Figma Libraries und ready-to-use Web Components veröffentlicht.

Auf der Startseite der Porsche Webseite hat man nun die Möglichkeit, das Video zu pausieren. Dies minimale Änderung ist ein weiterer Schritt in Richtung digitale Barrierefreiheit. Nach dem internationalen Standard für barrierefreie Webinhalte (Web Content Accessibility Guidelines, kurz WCAG) müssen Nutzer Animationen, die länger als fünf Sekunden dauern, anhalten können. Genauer gesagt müssen Nutzer in der Lage sein, die Website mit allen ihren Elementen zu bedienen, um so viel Kontrolle wie möglich zu haben. Für das Video auf der Porsche Webseite bedeutet dies, dass der Nutzer selbst entscheiden kann, ob das Video weiterlaufen soll oder nicht.

Auch abseits der großen, weltweit bekannten Marken tun Regierungen, Behörden und öffentliche Einrichtungen bereits viel, um digitale Barrieren zu minimieren.

Wenn Sie beispielsweise die Website der Bundesregierung besuchen, werden Ihnen wahrscheinlich Inhalte und Elemente auffallen, die Sie nicht unbedingt auf einer Unternehmenswebsite finden. So gibt es im Header (der Website) zwei Links zu Inhalten in Gebärdensprache und in Leichter Sprache. Darüber hinaus gibt es im Footer weitere Links zur “Erklärung zur Barrierefreiheit” und zum Formular “Barrieren melden”.

Öffentliche Einrichtungen sind im Gegensatz zu privaten Unternehmen verpflichtet, ihre digitalen Angebote nach den Richtlinien der WCAG und der BITV barrierefrei zu gestalten. Die BITV definiert neben den internationalen Richtlinien zur Barrierefreiheit weitere Anforderungen, die bei der Gestaltung digitaler Inhalte zu beachten sind. So müssen beispielsweise Inhalte in leichter Sprache auch für Menschen mit kognitiven Einschränkungen lesbar sein.

Für öffentliche Stellen gelten daher strengere Regeln, da sie sicherstellen müssen, dass Webinhalte von allen Menschen ohne größere Schwierigkeiten und ohne fremde Hilfe gelesen werden können.

Wie unsere Top-Beispiele zeigen, kann digitale Barrierefreiheit ganz schön gut aussehen. Auch wir bei Werk 8 legen großen Wert auf die Entwicklung barrierefreier Websites, wie unsere aktuellen Projekte für das CJD, die Stuttgarter Kickers und DIEDA zeigen.

Wenn Sie sich nicht sicher sind, ob Ihre Website barrierefrei ist, beraten wir Sie gerne und führen einen kurzen Quick-Check durch, um Ihnen klar und ehrlich zu zeigen, wo Sie stehen. Als zuverlässige Digitalagentur mit Sitz in Stuttgart und Ludwigsburg machen wir Ihre Website zügig und zuverlässig barrierefrei.