10 barrierefreie und Equality Act-konforme Website-Beispiele
Wie sieht eine barrierefreie Website eigentlich aus? Im Folgenden finden Sie 10 echte, Equality Act-konforme Websites, die starkes visuelles Design mit WCAG-Konformität vereinen und Ihnen konkrete Beispiele dafür geben, wie Sie ein ansprechendes und barrierefreies Nutzererlebnis schaffen können.
Autor: Sojin Rank, Director, Brand & Design
Veröffentlicht: 23.02.2026
)
Barrierefreies Webdesign stellt sicher, dass jeder, einschließlich Menschen mit Behinderungen, Ihre Inhalte wahrnehmen, navigieren und mit ihnen interagieren kann. Richtig umgesetzt, schafft es zudem ein besseres Erlebnis für alle Nutzer, nicht nur für Menschen mit Behinderungen.
Gutes barrierefreies Design ist selten Zufall, sondern das Ergebnis klarer technischer Standards. Im Vereinigten Königreich verweist das Equality Act(opens in a new tab) (EA) auf die Web Content Accessibility Guidelines(opens in a new tab) (WCAG), wobei WCAG 2.2 Level AA als Standard dient und als weithin anerkannter Maßstab dafür gilt, wie eine barrierefreie Website in der Praxis aussehen sollte.
Aber wie sieht das konkret aus? Im Folgenden stellen wir Ihnen 10 echte Beispiele für barrierefreies Webdesign vor, die die WCAG 2.2-Standards zum Leben erwecken – und zeigen, dass Barrierefreiheit nicht bedeutet, auf visuelles Design zu verzichten. Außerdem erhalten Sie einen kurzen Überblick darüber, was WCAG 2.2 Level AA tatsächlich verlangt.
Was macht eine Website barrierefrei?
Eine Website ist barrierefrei, wenn jeder, unabhängig von seinen Fähigkeiten, die Inhalte wahrnehmen, navigieren und mit ihnen interagieren kann. Das bedeutet, dass Screenreader-Nutzer Ihre Bilder verstehen können, Nutzer mit reiner Tastaturbedienung ohne Maus durch Ihre Seite navigieren können und ein überladenes oder verwirrendes Layout niemanden ausschließt.
Der Maßstab für eine barrierefreie Website ist WCAG 2.2 Level AA, das Barrierefreiheit in vier Prinzipien unterteilt: Wahrnehmbar, Bedienbar, Verständlich und Robust (POUR). In der Praxis bedeutet das zum Beispiel ausreichende Farbkontraste, beschreibende Alt-Texte und eine konsistente Navigation.
Verständnis von Equality Act Website-Konformität und Anforderungen
Nach dem ADA in den USA, dem Equality Act 2010 im Vereinigten Königreich und dem European Accessibility Act (EAA) in der EU dürfen Organisationen Menschen mit Behinderungen in öffentlichen Einrichtungen, einschließlich Online-Bereichen, nicht diskriminieren. Im Gegensatz zu einigen Vorschriften, die eigene technische Spezifikationen enthalten, definiert der ADA keine eigenen Barrierefreiheitsstandards; stattdessen verweist er auf die WCAG-Standards. Das bedeutet, dass WCAG 2.2 Level AA nicht nur eine Best Practice ist, sondern für viele Organisationen eine gesetzliche Anforderung.
Wie oben erwähnt, sind die WCAG-Standards in vier Kernprinzipien (POUR) gegliedert, die dann in spezifische, testbare Kriterien übersetzt werden. Während die vollständige Liste der WCAG-Kriterien umfangreich ist, gehören zu den häufigsten Anforderungen:
Gut geschriebene Alt-Tags für alle Bilder, Videos und Audiodateien
Klare und genaue Transkripte für Video- und Audioinhalte
Aktuelle Seitensprache im Header-Code
Klare Fehlermeldungen, die Fehler erklären und wie man sie behebt
Konsistentes, organisiertes Layout, das die Lesbarkeit fördert
Ausreichende Farbkontrastverhältnisse und barrierefreie Farbpaletten
Diese Anforderungen zu erfüllen ist wichtig, weil Barrierefreiheit nicht für alle gleich aussieht. Ein Nutzer mit Sehbehinderung muss möglicherweise die Schriftgröße erhöhen oder das Farbschema anpassen. Ein Nutzer mit motorischer Einschränkung ist eventuell vollständig auf Tastaturnavigation angewiesen. Eine Website, die die Anforderungen des Equality Act erfüllt muss in all diesen Szenarien funktionieren.
So bewerten Sie barrierefreies Design
Zu wissen, worauf man achten muss, ist die halbe Miete bei der Erstellung von Equality Act-konformen Websites. Hier sind die wichtigsten Bereiche, die Sie bei der Bewertung der Barrierefreiheit einer Website prüfen sollten.
Farbe und Kontrast (WCAG 1.4.3): Text muss vor seinem Hintergrund lesbar sein. WCAG verlangt ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Schlechter Farbkontrast ist einer der häufigsten Barrierefreiheitsfehler und mit den richtigen Tools leicht zu beheben. Farbkontrast-Checker helfen Ihnen, das richtige Gleichgewicht zu finden.
Tastaturbedienbarkeit (WCAG 2.1.1): Jede Funktion Ihrer Website sollte ohne Maus bedienbar sein. Nutzer mit motorischen Einschränkungen sind oft auf Tastaturbefehle und Shortcuts angewiesen. Wenn ein Button, Formular oder Menü nicht per Tastatur erreichbar ist, besteht eine Konformitätslücke.
Navigation und Orientierung (WCAG 2.4.x): Nutzer sollten immer wissen, wo sie sich auf Ihrer Seite befinden und wie sie dorthin gelangen, wo sie hinmöchten. Das bedeutet, klare Seitentitel, beschreibende Linktexte und mehrere Navigationsmöglichkeiten (wie eine Suchfunktion oder eine Sitemap) bereitzustellen, damit niemand verloren geht.
Struktur und Überschriften (WCAG 1.3.1): Eine korrekte Überschriftenstruktur ist nicht nur für SEO wichtig, sondern auch eine Barrierefreiheitsanforderung. Screenreader sind auf Überschriften angewiesen, um Nutzern beim Verständnis und der Navigation der Seiteninhalte zu helfen. Eine logische H1 > H2 > H3-Hierarchie ist daher unerlässlich.
Formulare und Fehlerbehandlung (WCAG 3.3.x): Barrierefreie Formulare kennzeichnen jedes Eingabefeld eindeutig und bieten hilfreiche, spezifische Fehlermeldungen, wenn etwas schiefgeht. Vage Fehler wie „ungültige Eingabe“ stellen für Nutzer mit kognitiven Einschränkungen Barrieren dar. Stattdessen sollten Fehler genau erklären, was korrigiert werden muss und wie.
Medien- und Bewegungskontrollen (WCAG 2.2.2): Alle bewegten, blinkenden oder automatisch abspielenden Inhalte müssen pausierbar, stoppbar oder ausblendbar sein. Das ist besonders wichtig für Nutzer mit Aufmerksamkeits- oder Gleichgewichtsstörungen, die durch ungewollte Bewegungen stark beeinträchtigt werden können.
10 Websites, die dem Equality Act entsprechen
1. Scope: Umsetzung von hohem Kontrast
Scope(opens in a new tab) beweist, dass Unternehmen für die Einhaltung der Farbkontrastanforderungen nicht auf eine starke Markenidentität verzichten müssen. Die Seite hat ein Kontrastverhältnis von 9,66:1, was es Nutzern mit Sehbehinderungen oder Farbenblindheit erleichtert, Elemente zu unterscheiden. Dies erfüllt außerdem das WCAG Erfolgskriterium 1.4.3 (Mindestkontrast)(opens in a new tab).
)
2. BBC News: Einfache Tastatursteuerung
Die BBC News Website(opens in a new tab) ist ein gutes Beispiel für WCAG Erfolgskriterium 2.1.1: Tastatur(opens in a new tab) in der Praxis. Jedes Element auf der Seite kann ausschließlich mit der „Tab“-Taste erreicht und aktiviert werden (keine Maus erforderlich). Ein klarer, gut sichtbarer Fokusindikator sorgt dafür, dass Nutzer immer genau wissen, wo sie sich auf der Seite befinden, was die Navigation für reine Tastaturnutzer intuitiv macht.
)
3. Vasa-Museum: Nutzung von Breadcrumbs
Das Vasa-Museum(opens in a new tab) in Schweden ist ein hervorragendes Beispiel für WCAG 2.4.8 (Position)(opens in a new tab) in der Praxis. Die Breadcrumb-Navigation am oberen Rand jeder Seite zeigt Nutzern klar, wo sie sich innerhalb der Seitenstruktur befinden und erfüllt so die Anforderung, dass der Standort eines Nutzers innerhalb einer Website immer leicht erkennbar ist. Für Menschen mit kognitiven Einschränkungen oder kurzer Aufmerksamkeitsspanne kann diese Orientierung den Unterschied machen, ob sie eine Aufgabe abschließen oder die Seite verlassen.
)
4. Metropolitan Transportation Authority: Klare Fehlermeldungen
Die Metropolitan Transportation Authority(opens in a new tab) hat eine reaktionsschnelle Suchfunktion geschaffen, die es Nutzern erleichtert, Informationen zu finden und Fehler zu korrigieren. Damit wird das WCAG Erfolgskriterium 3.3.3 (Fehlervorschlag)(opens in a new tab) erfüllt. Die Suchfunktion liefert auch bei falsch geschriebenen oder im falschen Format eingegebenen Informationen relevante Ergebnisse, sodass Nutzer finden, was sie suchen, und ihr Ziel erreichen können.
)
5. RNID: Einfach skalierbarer Text
RNID(opens in a new tab), eine nationale Wohltätigkeitsorganisation für Hörverlust, stellt sicher, dass Nutzer die Textgröße auf bis zu 300 % skalieren können und erfüllt damit die Anforderungen von WCAG Erfolgskriterium 1.4.4 (Textgröße anpassen)(opens in a new tab). So können Nutzer mit Sehbehinderung oder assistiven Technologien den Text vergrößern, ohne dass das Nutzungserlebnis beeinträchtigt wird.
)
6. National Federation of the Blind: Beschreibende Alt-Texte
Die National Federation of the Blind(opens in a new tab) (NFB) Website ist ein herausragendes Beispiel für WCAG 1.1.1 (Nicht-Text-Inhalte)(opens in a new tab) in der Praxis. Jedes Bild auf der Seite enthält einen kurzen, beschreibenden und kontextbezogenen Alt-Text, den Screenreader vorlesen oder in Braille umwandeln können. Für Nutzer, die auf assistive Technologien angewiesen sind, bedeutet das, dass sie den gesamten Seiteninhalt verstehen können – nicht nur die textbasierten Teile.
)
7. Toyota: Scrollende Inhalte pausieren
Die Toyota-Startseite(opens in a new tab) bietet eine Möglichkeit, scrollende Inhalte zu pausieren und erfüllt damit das WCAG Erfolgskriterium 2.2.2 (Pausieren, Stoppen, Ausblenden)(opens in a new tab). Das scrollende Karussell enthält eine gut sichtbare Pausentaste, sodass Nutzer bewegte Inhalte nach ihren eigenen Bedürfnissen anhalten können. Für Menschen mit Sehbehinderung oder kognitiven Einschränkungen kann diese einfache Steuerung Ablenkungen deutlich reduzieren und es erleichtern, Informationen ohne Zeitdruck zu erfassen.
)
8. Wikipedia: Nutzbares Inhaltsverzeichnis
Wikipedia(opens in a new tab) ist ein hervorragendes Beispiel für WCAG 2.4.5 (Mehrere Wege)(opens in a new tab) in der Praxis. Jede Artikelseite enthält ein klickbares Inhaltsverzeichnis, mit dem Nutzer direkt zum gewünschten Abschnitt springen können – eine Alternative zum kompletten Durchscrollen der Seite. Für Nutzer, die sich durch Millionen von Seiten bewegen, machen mehrere Navigationsmöglichkeiten den Unterschied zwischen Frust und Effizienz.
)
9. Federal Aviation Administration: Korrekte HTML-Nutzung
Die Federal Aviation Administration(opens in a new tab) verwendet eine logische Überschriftenhierarchie mit H1 für Hauptthemen und H2 für Unterthemen, sodass die Struktur und Beziehungen der Inhalte programmatisch und nicht nur visuell definiert sind. Für Nutzer, die auf Screenreader angewiesen sind, um sich durch umfangreiche regulatorische Inhalte zu navigieren, erleichtert diese klare Hierarchie das Verständnis und das schnelle Auffinden von Informationen erheblich. Dies erfüllt außerdem das WCAG Erfolgskriterium 1.3.1 (Information und Beziehungen)(opens in a new tab).
)
10. World Wide Web Consortium: Aussagekräftige, präzise Seitentitel
Wenige Organisationen sind besser geeignet, barrierefreie Seitentitel vorzuleben, als das W3C(opens in a new tab), das Gremium, das die Standards selbst schreibt. Jeder Seitentitel ist prägnant und beschreibend, erfüllt WCAG 2.4.2 (Seite betitelt)(opens in a new tab) und kommuniziert klar, was die Seite enthält, noch bevor ein Nutzer sie aufruft. Für Nutzer, die auf Screenreader angewiesen sind oder mehrere Browser-Tabs nutzen, beseitigt diese Klarheit eine große Barriere und erleichtert das Auffinden und Zurückkehren zu den richtigen Inhalten erheblich.
)
Finden Sie mit AudioEye heraus, wie barrierefrei Ihre Website ist
Ein Equality Act-konformes Webdesign erfordert keinen kompletten Neustart. Kleine Verbesserungen wie das Hinzufügen von Alt-Texten, die Korrektur der Überschriftenstruktur, das Untertiteln von Videos und die Verbesserung des Farbkontrasts können Barrieren wirksam abbauen und das rechtliche Risiko verringern.
Am schnellsten erfahren Sie, wo Sie stehen, indem Sie Ihre Seite testen. Der kostenlose Accessibility Checker von AudioEye erkennt häufige Fehler automatisch, und unsere Automatischen Korrekturen beheben diese automatisch. Für Probleme, die menschliches Augenmaß erfordern, stehen Ihnen unser Team aus Barrierefreiheits-Experten und Mitglieder der Community von Menschen mit Behinderungen zur Seite.
Bereit herauszufinden, wie barrierefrei Ihre Inhalte sind?
Häufig gestellte Fragen
Artikel teilen
)
)
)