13 Beispiele für moderne, barrierefreie Websites zur Inspiration

Wenn man bedenkt, dass rund 16 Prozent der Weltbevölkerung (1) mit einer Form von Behinderung leben, wird schnell klar, warum barrierefreies Webdesign eine zentrale Überlegung für alle Unternehmen und Website-Betreiber sein sollte.

Die Web Content Accessibility Guidelines (WCAG) bilden mittlerweile die Grundlage für digitale Barrierefreiheitsstandards weltweit und werden in zahllosen ADA-Klagen erwähnt, was ihre Bedeutung zusätzlich unterstreicht.

Bereit, die Nutzererfahrung auf Ihrer Website zu verbessern?

In diesem Blog werden einige Grundlagen der Web-Barrierefreiheit erläutert und inspirierende Beispiele für barrierefreies Design vorgestellt.

Was ist Barrierefreiheit im Web?

Web-Barrierefreiheit bezieht sich auf den Einsatz von Tools und Technologien zur Entwicklung von Websites, die auf die Bedürfnisse der behinderten Gemeinschaft ausgerichtet sind.

Ein behinderter Website-Besucher sollte – wie jeder andere Besucher auch – in der Lage sein, den Inhalt Ihrer Seite zu verstehen, wahrzunehmen, zu navigieren und mit ihm zu interagieren, unabhängig davon, ob die Seite auf einem mobilen Gerät oder einem Desktop aufgerufen wird.

Web-Barrierefreiheit umfasst alle Arten von dauerhaften Behinderungen, einschließlich physischer, hörbezogener, sprachlicher, visueller, kognitiver und neurologischer Beeinträchtigungen. Aber auch Menschen mit temporären Einschränkungen können von einer Website profitieren, die den Standards der digitalen Barrierefreiheit entspricht.

Was haben barrierefreie Websites gemeinsam?

Wenn wir die besten barrierefreien Websites miteinander vergleichen, sehen wir, dass sie in der Regel einige wichtige Elemente gemeinsam haben.

Farbkontrastverhältnisse sind korrekt

Es ist kein Geheimnis, dass eine Website optisch ansprechend sein muss – und es gibt viele Möglichkeiten, dies zu erreichen. Ein auffälliges Design funktioniert jedoch nicht immer für Nutzer mit eingeschränktem Sehvermögen.

Laut WCAG sollte das empfohlene Farbkontrastverhältnis zwischen dem Hintergrund Ihrer Website und dem Vordergrundtext 4,5:1 betragen. Großformatiger Text und Bilder von großformatigem Text sollten ein Kontrastverhältnis von mindestens 3:1 aufweisen.

Für Text, der Teil eines Logos oder Markennamens ist, gelten keine Anforderungen an den Farbkontrast.

Wenn Sie den Farbkontrast Ihrer Website einfach überprüfen möchten, können Sie dieses Tool zur Farbkontrastprüfung verwenden.

Links sind beschreibend

Einige Nutzer, die Ihre Website besuchen, tun dies mithilfe eines Screenreaders. Screenreader unterstützen Menschen mit Sehschwäche oder kognitiven Einschränkungen, indem sie den Text auf dem Bildschirm – einschließlich der Links – vorlesen.

Wenn der verlinkte Text auf Ihrer Website nicht beschreibend ist, kann dies zu Verwirrung führen. Statt beispielsweise nur die Worte „Hier klicken“ zu verlinken, ist es besser, mehrere Wörter zu verlinken, die genau erklären, was ein Link tut oder wohin er führt.

Die Website ist mit der Tastatur bedienbar

Nutzer mit eingeschränkter Feinmotorik können oft keine Maus verwenden, um eine Website zu navigieren. Daher sollte eine barrierefreie Website problemlos nur mit Tastaturbefehlen bedienbar sein (2). Dazu gehören auch Bildschirmtastaturen und Tastaturemulatoren wie Sprachsteuerungssoftware.

Bilder sind verständlich

Bilder sind ein weiteres Seitenelement, mit dem Screenreader normalerweise interagieren – hier kommt der Alt-Text ins Spiel.

Alt-Text ist eine Beschreibung eines Bildes auf Ihrer Website, die im HTML-Code eingebettet ist. Wenn eine Beschreibung vorhanden ist, kann ein Screenreader dem Nutzer mehr Kontext darüber geben, was auf dem Bildschirm zu sehen ist. Wenn Ihre Bilder nur lange und verwirrende Dateinamen haben, werden diese stattdessen vorgelesen.

Alt-Texte sollten immer kurz, beschreibend und relevant für den restlichen Seiteninhalt sein. Für Bilder, bei denen ein Alt-Text nicht erforderlich ist und die keinen Einfluss auf die Nutzererfahrung haben, kann ein leerer Alt-Attributwert verwendet werden.

Navigation ist klar und einfach

Die meisten Online-Nutzer haben eine kurze Aufmerksamkeitsspanne – bei Menschen mit kognitiven oder neurologischen Einschränkungen kann diese noch ausgeprägter sein.

Deshalb ist es entscheidend, dass die Navigation einer Website einfach ist und alle primären Navigationsoptionen auf jeder Seite verfügbar sind. Breadcrumbs sind ebenfalls ein gutes Mittel, um sicherzustellen, dass der Nutzer immer weiß, wo er sich auf Ihrer Seite befindet und wie er zurückkommt.

Die richtigen Überschriften-Tags werden verwendet

Überschriften-Tags (3) wie H1, H2 und H3 erleichtern nicht nur jedem Besucher das Lesen des Textes auf Ihrer Seite, sondern helfen auch Nutzern mit Screenreadern.

Wenn die richtigen Überschriften in der richtigen Reihenfolge verwendet werden, kann ein behinderter Nutzer den Textfluss und die Wichtigkeit des Inhalts auf einer Seite besser verstehen. Es ist außerdem wichtig, keine Überschriftenebenen zu überspringen, da ein Screenreader den Text sonst möglicherweise falsch vorliest.

Animationen & scrollende Inhalte können pausiert werden

Elemente wie Karussells, animierte Grafiken oder Videos sind eine gute Möglichkeit, viele Informationen auf einer Seite unterzubringen. Einige Nutzer tun sich jedoch schwer, mit solchen Inhalten zu interagieren.

Auch wenn Sie auf diese Inhalte nicht verzichten müssen, ist es wichtig, dem Nutzer die Möglichkeit zu geben, sie bei Bedarf zu pausieren, zu stoppen oder auszublenden. Dies ist eine weitere Richtlinie, die in den WCAG beschrieben wird.

Text kann personalisiert werden

Besucher mit Sehschwäche haben oft Schwierigkeiten, kleine Schrift zu lesen. Barrierefreie Websites ermöglichen es daher, die Textgröße den eigenen Bedürfnissen anzupassen.

WCAG empfiehlt außerdem, keine Bilder zu verwenden, um Text darzustellen. Wenn ein Nutzer Text vergrößert, sollte dieser dennoch vollständig sichtbar bleiben, ohne dass horizontal gescrollt werden muss.

Seitentitel sind durchdacht

Wenn Sie sich mit den Grundsätzen der Suchmaschinenoptimierung auskennen, wissen Sie, wie wichtig ein guter Seitentitel (4) ist. Auch behinderte Nutzer sind auf klare Seitentitel angewiesen, da dieser das erste ist, was ein Screenreader beim Aufruf einer Seite vorliest.

Beim Schreiben eines Seitentitels sollte dieser beschreibend, aber auch spezifisch genug sein, dass jeder seinen Inhalt versteht.

Wie man Web-Barrierefreiheit testet

Wenn Sie gerade erst mit dem Thema Web-Barrierefreiheit beginnen, fragen Sie sich vielleicht, wo Ihre Website aktuell steht und wie viel Arbeit noch vor Ihnen liegt.

Glücklicherweise gibt es eine Reihe kostenloser und kostenpflichtiger Tools, die Ihre Website sofort scannen und analysieren können – und Ihnen in einem detaillierten Bericht aufzeigen, wo gravierende Barrierefreiheitsprobleme bestehen. Ihre Website wird dabei auch einer Stufe zugeordnet: Level A, AA oder AAA, wobei Level AA für die meisten Websites ideal ist.

Je nach gewähltem Tool kann Ihre Website anschließend automatisch oder manuell angepasst werden. Hier sind fünf der besten Tools zur Überprüfung der Barrierefreiheit, die Sie bei der ADA-Compliance unterstützen können.

13 inspirierende Beispiele für barrierefreies Webdesign

Jetzt, da Sie ein besseres Verständnis für die grundlegenden Anforderungen an eine barrierefreie Website haben, werfen wir einen Blick auf einige der besten barrierefreien Websites.

1. Patagonia

Patagonia, ein führendes Unternehmen für Outdoor-Bekleidung, ist ein Top-Beispiel für eine barrierefreie E-Commerce-Website.

Der Text hat einen hohen Kontrast, alle Bilder verfügen über den erforderlichen Alternativtext, und die Seiten sind gut strukturiert, was es jedem leicht macht, sich auf der Website zurechtzufinden.

Eine Erklärung zur Barrierefreiheit befindet sich ebenfalls im Footer der Website für alle, die mehr über die Maßnahmen erfahren möchten, die Patagonia für ein barrierefreies Erlebnis ergriffen hat.

2. SnackNation

Für alle, die Snacks an Freunde, Familie oder Kollegen liefern möchten, ist SnackNation ein beliebter Anbieter.

Ein besonderes Merkmal in puncto Barrierefreiheit ist die Ausrichtung auf Nutzer mit kognitiven Einschränkungen wie ADHS oder Autismus.

Mit Hilfe von accessiBe, einem bekannten Tool zur Barrierefreiheit, können Nutzer mit kognitiven Schwierigkeiten sich nur auf die wichtigsten Elemente der Website konzentrieren. Über das accessiBe-Panel lassen sich Überschriften und Menüleisten ausblenden, um Ablenkungen zu minimieren und das Surfen einfacher zu gestalten.

3. EventBrite

Im Bereich barrierefreies Webdesign macht die Event-Management-Plattform EventBrite vieles richtig.

Die Layouts sind klar, leicht verständlich und einfach zu navigieren. Besucher haben außerdem die Möglichkeit, Inhalte bei Bedarf zu überspringen. So kann die Marke auch ansprechende Animationen nutzen, ohne Nutzer mit kognitiven oder visuellen Einschränkungen auszuschließen.

4. Scope

Schon auf den ersten Blick wird klar, dass Scope sich für die Behindertengemeinschaft engagiert.

In ihrer Erklärung zur Barrierefreiheit wird betont, dass sie WCAG 2.0, WCAG 2.2 und BS 8878 einhalten, und dass Nutzer ihre Surferfahrung personalisieren können.
Scope musste dabei keine Abstriche beim modernen und farbenfrohen Design machen – stattdessen wurde auf Farbkontrast, einfache Navigation und Alternativtexte geachtet.

5. Lonely Planet

Auch Lonely Planet hat ein Accessibility-Panel integriert, mit dem Besucher Funktionen und visuelle Aspekte der Website an ihre Bedürfnisse anpassen können.

Ein Beispiel ist das ADHS-freundliche Profil, das Ablenkungen reduziert, um ein angenehmeres Surferlebnis zu ermöglichen. Diese Funktion hilft Nutzern, sich nur auf die wichtigsten Elemente der Seite zu konzentrieren.

Auch die einfache Navigation macht diese Website zu einer der besten barrierefreien Seiten.

6. BBC

BBC News verzeichnet ständig hohe Besucherzahlen, darunter viele Menschen mit Behinderungen – daher ist Barrierefreiheit hier schon lange eine Priorität.

Die Website lässt sich vollständig mit der Tastatur navigieren. Mit der Tab-Taste können Nutzer alle Seitenelemente durchlaufen, ohne eine Maus zu benötigen.

Zudem verfügt jedes Bild über einen klaren und beschreibenden Alternativtext für Screenreader-Nutzer.

7. Pacific Life

Pacific Life, ein Unternehmen für Lebensversicherungen und betriebliche Leistungen, setzt auf das Accessibility-Panel von EqualWeb, um keine Besucher aufgrund ihrer Fähigkeiten auszuschließen.

Je nach Einschränkung lassen sich über das Panel gezielte Funktionen aktivieren. Eine davon ist der Lese-Modus, der alle Grafiken und bewegten Bilder entfernt, damit sich Nutzer mit Seh-, Motorik- oder kognitiven Einschränkungen auf den reinen Text konzentrieren können.

8. Mighty Networks

Die Community-Plattform Mighty Networks bietet eine optisch ansprechende und zugleich vollständig barrierefreie Website.

Das Design ist übersichtlich und verständlich, mit gut lesbarem Text und dezenten Animationen, die nicht vom Inhalt ablenken.

Bilder sind mit Alternativtext versehen, um auch Screenreader-Nutzern den Zugang zu erleichtern.

9. RNID

Die Wohltätigkeitsorganisation RNID, die Menschen mit Hörverlust unterstützt, zeigt eindrucksvoll, wie gut Textskalierung auf einer barrierefreien Website funktionieren kann.

Text lässt sich um bis zu 300 Prozent vergrößern, ohne dass Inhalte abgeschnitten werden. Die Seite ist einfach aufgebaut und screenreaderfreundlich – ganz im Sinne ihrer Mission.

10. Hilton Columbus

Hilton Columbus empfängt ganzjährig Gäste aus dem In- und Ausland – barrierefreies Design hat daher höchste Priorität.

Auch diese Website nutzt accessiBe, um den Besuchern eine individuell anpassbare Buchungs- und Surferfahrung zu bieten.

Besonders interessant ist das Profil „Anfallsicher“, das blinkende oder flackernde Elemente sowie problematische Farbkombinationen deaktiviert – ideal für Menschen mit Epilepsie.

11. Partake Foods

Ein weiteres beeindruckendes Beispiel ist die Website von Partake Foods.

Jede Seite wurde unter Berücksichtigung von Barrierefreiheit und Nutzererfahrung gestaltet. Besucher können die Website mit Maus oder Tastatur bedienen, Textgröße anpassen, Animationen pausieren und gut lesbare Schriftarten wählen.

Zudem ist der Text gut strukturiert, mit passenden Überschriften-Tags für ein reibungsloses Erlebnis mit assistiven Technologien.

12. National Federation of the Blind

Als Organisation, die blinde Menschen unterstützt, ist Barrierefreiheit für diese Website selbstverständlich.

Einfache Navigation, klare Überschriften-Tags und kurze, relevante Alternativtexte machen diese Website zu einem Paradebeispiel für Barrierefreiheit.

13. Girls Who Code

Diese inspirierende Marke setzt auf Inklusivität – auch ihre Website zeigt, dass gutes Design und Barrierefreiheit Hand in Hand gehen können.

Besonders auffällig ist der saubere, strukturierte HTML-Code. Das ist nicht nur gut für SEO, sondern ermöglicht auch assistiven Technologien eine einfache und verständliche Navigation.

Lösungen für barrierefreie Websites

Wenn Sie den nächsten Schritt machen und sicherstellen möchten, dass Ihre Website den neuesten WCAG-Anforderungen entspricht, gibt es zwei besonders empfehlenswerte Lösungen.

Zum Abschluss!

Wie Sie an diesen hervorragenden Beispielen barrierefreier Websites sehen können, muss man sich nicht zwischen Barrierefreiheit und einem ansprechenden Webdesign entscheiden – beides ist möglich.

Durch die Umsetzung grundlegender Prinzipien der Barrierefreiheit lässt sich ein ansprechendes Nutzererlebnis schaffen, das gleichzeitig den Anforderungen von Gesetzen wie dem ADA, AODA und Section 508 entspricht.

Zudem stehen zahlreiche hervorragende Tools zur Verfügung, die Sie dabei unterstützen können.