Barrierefreie Website: Diese 10 Kriterien solltest du unbedingt umsetzen

Eine barrierefreie Website stellt sicher, dass alle Menschen deine Inhalte nutzen können, unabhängig von körperlichen oder kognitiven Einschränkungen. Gleichzeitig verbessert sie die Nutzerfreundlichkeit für alle Besucher:innen – und stärkt dein Google-Ranking.

Doch was genau macht eine Website barrierefrei?

Die internationalen Web Content Accessibility Guidelines (WCAG) bieten klare Kriterien, die du als Orientierung nutzen kannst. Diese Kriterien sind auch die Grundlage für das Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 in Deutschland gilt.

In diesem Artikel zeige ich dir die zehn wichtigsten Anforderungen, mit denen du deine Website Schritt für Schritt barrierefreier machst. Außerdem erfährst du, was es mit den WCAG-Stufen A, AA und AAA auf sich hat – und warum es sich lohnt, jetzt aktiv zu werden.

Die vier Prinzipien der barrierefreien Website: Wahrnehmbar, bedienbar, verständlich, robust

Alle Anforderungen der WCAG basieren auf vier grundlegenden Prinzipien. Sie definieren, was eine Website leisten muss, damit sie für alle Menschen zugänglich ist – egal mit welcher Einschränkung oder mit welchem Gerät.

1. Wahrnehmbar

Informationen und Benutzeroberflächen müssen so gestaltet sein, dass sie von allen Nutzenden wahrgenommen werden können – auch dann, wenn Sinne wie Sehen oder Hören eingeschränkt sind.

Beispiele:

• Bilder brauchen Alternativtexte
• Videos sollten Untertitel haben
• Inhalte müssen ausreichend kontrastreich sein
  

2. Bedienbar

Alle Funktionen müssen ohne Einschränkungen bedienbar sein – z. B. auch ohne Maus oder Touchscreen.

Beispiele:

• Navigation über Tastatur muss möglich sein
• Fokusindikatoren müssen sichtbar sein (z. B. bei Buttons)
• Inhalte dürfen nicht automatisch weiterlaufen, ohne dass man sie steuern kann
  

3. Verständlich

Inhalte und Funktionen müssen leicht verständlich und nachvollziehbar sein – sowohl sprachlich als auch strukturell.

Beispiele:

• Klare, einfache Sprache
• Einheitliche Navigation
• Hilfreiche Fehlermeldungen in Formularen
  

4. Robust

Die Website muss so entwickelt sein, dass sie auch mit verschiedenen Browsern, Geräten und assistiven Technologien funktioniert – und das möglichst langfristig.

Beispiele:

• Sauberer HTML-Code
• Kompatibilität mit Screenreadern
• Keine Abhängigkeit von speziellen Plugins oder proprietären Formaten

Was bedeutet „proprietäre Formate“?

Ein proprietäres Format ist ein Dateiformat oder eine Technologie, das/die nur von einem bestimmten Hersteller entwickelt und kontrolliert wird. Es ist nicht öffentlich dokumentiert oder standardisiert – das heißt: Nur bestimmte Programme oder Geräte können es korrekt darstellen oder verarbeiten.

Wenn du auf deiner Website Inhalte oder Funktionen anbietest, die nur mit spezieller Software oder bestimmten Geräten nutzbar sind, schließt du viele Menschen aus – vor allem, wenn sie Hilfstechnologien wie Screenreader oder alternative Browser verwenden.

Barrierefreiheit heißt: Offen, zugänglich, standardisiert.
Deshalb ist es wichtig, offene Webstandards wie HTML, CSS oder barrierefreie PDF-Standards zu verwenden – damit deine Inhalte robust bleiben, also langfristig nutzbar und kompatibel.

Was bedeuten die Stufen A, AA und AAA bei der barrierefreien Website?

Die wichtigsten Anforderungen an eine barrierefreie Website sind in den sogenannten Web Content Accessibility Guidelines (WCAG) definiert. Diese Richtlinien wurden vom World Wide Web Consortium (W3C) entwickelt und gelten international als Standard, wenn es um digitale Barrierefreiheit geht.

Die WCAG unterscheiden dabei drei Stufen der Barrierefreiheit:

Stufe A – das absolute Minimum (MUSS)

Diese Stufe bildet die Grundvoraussetzungen. Sie sorgt dafür, dass Menschen mit Behinderungen überhaupt auf die Inhalte zugreifen können. Wer Stufe A nicht erfüllt, schließt viele Nutzer:innen komplett aus.

Beispiele:

• Alternativtexte für Bilder
  Inhalte müssen per Tastatur erreichbar sein
  Keine flackernden oder blinkenden Inhalte
  

Stufe AA – der empfohlene Standard (SOLL)

Diese Stufe wird in der Praxis am häufigsten als Ziel vorgegeben – auch in der gesetzlichen Umsetzung des BFSG. Sie stellt sicher, dass Inhalte nicht nur zugänglich, sondern auch gut nutzbar sind.

Beispiele:

• Ausreichende Farbkontraste
• Skalierbare Schriftgrößen
• Sinnvolle Fokusreihenfolge bei der Navigation
  

Stufe AAA – die höchste Stufe (KANN)

Diese Stufe geht über das gesetzlich Erforderliche hinaus. Sie sorgt für ein besonders hohes Maß an Barrierefreiheit, ist aber nicht in allen Fällen vollständig umsetzbar – etwa bei komplexen interaktiven Inhalten.

Beispiele:

• Untertitel für Live-Videos
• Einfache Sprache zusätzlich zur Fachsprache
• Flexible Darstellung je nach Nutzerpräferenz
  

In der Praxis bedeutet das:

• Stufe A musst du erfüllen.
• Stufe AA solltest du erfüllen – sie ist gesetzlich verbindlich.
• Stufe AAA kannst du erfüllen – wenn es für dein Projekt sinnvoll und umsetzbar ist.

Die 10 wichtigsten Kriterien für eine barrierefreie Website

Mit dieser Checkliste bekommst du einen klaren Überblick über die zentralen Anforderungen einer barrierefreien Website. Viele der Punkte sind einfacher umzusetzen, als du denkst – und verbessern deine Website für alle Besucher:innen. 

Die Kriterien sind alle gleichwertig und nicht nach Wichtigkeit geordnet, d.h. Nr. 10 ist genauso wichtig wie Nr. 1.

Ausreichende Farbkontraste

Stelle sicher, dass Text und Hintergrund ausreichend Kontrast zueinander haben. Besonders wichtig ist das für Menschen mit Sehschwächen oder Farbenblindheit. Pastelltöne auf hellem Hintergrund mögen frisch wirken, sind aber schwer lesbar.

Aber was tun, wenn deine Brandingfarben nun mal nicht ausreichend Farbkontrast bieten? So schwer es fällt: Finde für deine Website kontrastreiche Varianten deiner Brandingfarben. Ja, auch mein Designerinnen-Herz blutet bei so mancher Barrierefreiheitsvorgabe, aber es ist, wie es ist.

Hier ein Beispiel:

Hast du gute Augen? Super, dann ist das weiß auf diesem türkis sicherlich gut lesbar für dich. 

Aber so geht es nicht allen Menschen. Diese Farbkombination erfüllt noch nicht einmal die Mindestanforderungen an barrierefreie Farbkontraste. Im folgenden Screenshot siehst du eine typische Auswertung mit einem Kontrastanalyse-Tool. Geprüft wurde, ob die Textfarbe ausreichend kontrastreich zum Hintergrund ist.

Hast du gute Augen? Super, dann ist das weiß auf diesem türkis sicherlich gut lesbar für dich. 

Aber so geht es nicht allen Menschen. Diese Farbkombination erfüllt noch nicht einmal die Mindestanforderungen an barrierefreie Farbkontraste. Im folgenden Screenshot siehst du eine typische Auswertung mit einem Kontrastanalyse-Tool. Geprüft wurde, ob die Textfarbe ausreichend kontrastreich zum Hintergrund ist.

Das Tool prüft drei Bereiche:

• Normaler Text (z. B. Fließtext)
• Großer Text (z. B. Überschriften oder Buttons)
• Grafische Bedienelemente (z. B. Formulare oder Icons

In allen Fällen lautet das Ergebnis: WCAG AA: Fail und WCAG AAA: Fail
Das heißt: Dieser Text erfüllt weder die Mindestanforderungen (AA) noch die erweiterten Kriterien (AAA). Selbst große oder fette Schrift wird durch den schlechten Kontrast nicht ausreichend lesbar.

Falls du in deinem Branding also diese oder eine ähnliche Farbkombination nutzt, solltest du eine Alternative suchen.

Du kannst den Kontrast deiner Farben mit dem kostenlosen WebAIM Contrast Checker ganz einfach selbst prüfen: https://webaim.org/resources/contrastchecker/  

Gib einfach deine Vordergrundfarbe (also die des Textes) und deine Hintergrundfarbe ein und du erhältst direkt das Ergebnis. Die Zahl unter “Contrast Ratio” gibt dir einen wichtigen Anhaltspunkt: Du brauchst mindestens ein Kontrastverhältnis von 4.5:1, um Barrierefreiheit zu gewährleisten.

Gut lesbare Schriftarten und -größen

Zu kleine Schrift wirkt zwar oft „modern“, ist aber für viele schwer lesbar – besonders auf dem Handy oder bei beginnender Altersweitsichtigkeit.

Tipp für deine Website-Technik:
Verwende für die Schriftgröße besser skalierbare Einheiten wie rem statt feste Pixelgrößen (px).
rem bedeutet: Die Schriftgröße wird relativ zur sogenannten „Root-Schriftgröße“ (meistens 16 px im Browser) berechnet. Wenn du z. B. 1 rem nutzt, entspricht das 16 px. Wenn du 1.25 rem verwendest, ist die Schrift etwa 20 px groß.

Das hat zwei große Vorteile:

1. Deine Texte passen sich besser an die Nutzer-Einstellungen an – z. B. wenn jemand im Browser eine größere Schrift eingestellt hat.
   
2. Du kannst deine Schriftgrößen einfacher einheitlich skalieren, indem du nur an einer Stelle die Basisgröße änderst.

So stellst du sicher, dass deine Website auch bei verschiedenen Geräten, Auflösungen oder Benutzer-Einstellungen gut lesbar bleibt.

Navigation per Tastatur möglich

Alle Funktionen deiner Website sollten ohne Maus nutzbar sein – nur mit der Tastatur. Das ist vor allem für Menschen mit motorischen Einschränkungen essenziell. Achte darauf, dass Menüs, Buttons und Formulare per „Tab“-Taste erreichbar sind.

Teste selbst: Kannst du deine Website komplett mit Tab, Enter und Pfeiltasten bedienen?

Klare Seitenstruktur

Verwende übersichtliche Überschriften (H1, H2, H3 …), sinnvolle Absätze und eine logische Gliederung. So können sich auch Menschen mit Screenreader oder eingeschränkter Konzentration gut orientieren. Übrigens: Das ist nicht nur aus Gründen der Barrierefreiheit wichtig, sondern auch ein wichtiger SEO-Faktor (siehe auch: 10 häufige SEO-Fehler und wie du sie vermeidest)!

Tipp: Jede Seite sollte genau eine H1-Überschrift haben – das ist der Titel der Seite.

Textalternativen für Bilder und Medien

Füge zu jedem Bild, Icon oder Multimediaelement einen Alternativtext (Alt-Text) hinzu. Screenreader können diesen Text vorlesen und ermöglichen so blinden oder sehbehinderten Menschen, den Inhalt zu erfassen.

Tipp: Beschreibe kurz und sachlich, was auf dem Bild zu sehen ist. Verzichte auf „Bild von …“ – das erkennt der Screenreader selbst.

Klare und verständliche Sprache

Vermeide Fachbegriffe und verschachtelte Sätze. Verwende klare, einfache Sprache, kurze Absätze und aktive Formulierungen. Das hilft Menschen mit kognitiven Einschränkungen – und macht deine Inhalte für alle angenehmer zu lesen.

Tipp: Lies dir deinen Text laut vor. Klingt er verständlich? Dann bist du auf dem richtigen Weg.

Keine flackernden oder blinkenden Elemente

Verzichte auf flackernde, blinkende oder automatisch rotierende Inhalte – sie können nicht nur stören, sondern auch gesundheitliche Probleme auslösen, z. B. epileptische Anfälle. Auch nervige Pop-ups oder unvorhersehbare Animationen solltest du vermeiden.

Setze Bewegung bewusst und sparsam ein – und nur dann, wenn sie steuerbar ist.

Untertitel und Transkriptionen für Medien

Stelle für Videos Untertitel bereit – und für Audiodateien schriftliche Transkripte. So können auch Menschen mit Hörbeeinträchtigungen die Inhalte vollständig erfassen.

Gut zu wissen: Auch viele Nutzer:innen ohne Einschränkungen nutzen Untertitel – z. B. auf dem Smartphone ohne Ton.

Geräteunabhängigkeit

Deine Website sollte auf allen Geräten funktionieren – Desktop, Tablet und Smartphone – und mit Hilfstechnologien wie Screenreadern kompatibel sein. Responsives Design ist hier Pflicht.

Nutze Tools wie den Screenreader-Modus im Chrome-Browser oder teste auf Mobilgeräten.

Regelmäßiges Testen auf Barrierefreiheit

Barrierefreiheit ist kein einmaliges Projekt, sondern ein fortlaufender Prozess. Teste deine Website regelmäßig – besonders nach Designänderungen oder Updates.

Es gibt dafür kostenlose Tools wie den WAVE Accessibility Checker (https://wave.webaim.org/) oder den Accessibility Checker von Silktide (https://silktide.com/toolbar/) als Erweiterung für den Chrome-Browser.

Barrierefreiheit ist kein Extra – sondern Standard

Barrierefreiheit ist nicht nur ein rechtliches Thema – sie ist ein Zeichen für Qualität, Nutzerorientierung und digitale Verantwortung. Wenn du deine Website barrierefrei gestaltest, machst du sie nicht nur zugänglich für Menschen mit Einschränkungen – du verbesserst die Nutzererfahrung für alle.

Viele der wichtigsten Kriterien lassen sich mit etwas Aufmerksamkeit und Planung auch ohne technisches Fachwissen umsetzen. Alternativtexte, gute Kontraste, einfache Sprache, Tastaturbedienung – das sind keine exotischen Anforderungen, sondern gute Standards, die jede Website stärken.

Warte nicht bis zur gesetzlichen Pflicht – mach Barrierefreiheit jetzt zu einem Teil deines Webauftritts. So bist du nicht nur rechtlich auf der sicheren Seite, sondern zeigst auch: Auf deiner Website ist jeder willkommen.

FAQ – Häufige Fragen zur barrierefreien Website

Was ist der Unterschied zwischen Stufe A, AA und AAA?

Die WCAG definieren drei Stufen:

• A ist das Mindestmaß an Barrierefreiheit (Pflicht)
  
• AA ist der empfohlene Standard (gesetzlich relevant)
  
• AAA ist die höchste Stufe, aber nicht immer vollständig umsetzbar
  

Ziel sollte sein: Stufe AA möglichst vollständig erfüllen.

Muss ich alle 10 Kriterien aus der Checkliste umsetzen?

Nicht zwangsläufig alle – aber je mehr du davon berücksichtigst, desto besser wird die Zugänglichkeit deiner Website. Viele der Punkte sind auch unabhängig von der Barrierefreiheit Best Practices für gutes Webdesign.

Was bedeutet „wahrnehmbar, bedienbar, verständlich, robust“?

Das sind die vier Prinzipien der Barrierefreiheit. Sie helfen dabei, Inhalte so zu gestalten, dass alle Menschen – mit oder ohne Einschränkungen – sie nutzen können. Sie bilden die Grundlage der WCAG-Richtlinien.

Quellen

W3C – World Wide Web Consortium. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Abgerufen am 19. April 2025 von https://www.w3.org/WAI/standards-guidelines/wcag/

Europäische Union. (2019). Richtlinie (EU) 2019/882 des Europäischen Parlaments und des Rates über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen. Amtsblatt der Europäischen Union, L 151/70. Abgerufen  am 19. April 2025 von https://eur-lex.europa.eu/legal-content/DE/TXT/?uri=CELEX%3A32019L0882

Bundesrepublik Deutschland. (2021). Gesetz zur Stärkung der Barrierefreiheit (BFSG). BGBl. I S. 2746. Abgerufen am 19. April 2025 von https://www.gesetze-im-internet.de/bfsg/

Aktion Mensch. (o. J.). Barrierefreie Website – gesetzliche Pflichten nach dem BFSG. Abgerufen am 19. April 2025 von https://www.aktion-mensch.de/inklusion/barrierefreiheit/barrierefreie-website/gesetzliche-pflichten

bfsg-gesetz.de. (o. J.). Das Barrierefreiheitsstärkungsgesetz einfach erklärt. Abgerufen am 19. April 2025 von https://bfsg-gesetz.de/

IT-Recht Kanzlei. (2023). FAQ: Barrierefreiheit im Online-Handel – Pflichten nach dem BFSG. Abgerufen am 19. April 2025 von https://www.it-recht-kanzlei.de/faq-barrierefreiheit-online-shops-bfsg.html

WebAIM. (o. J.). Contrast Checker. Abgerufen am 19. April 2025 von https://webaim.org/resources/contrastchecker/

TPGi. (o. J.). Color Contrast Analyzer. Abgerufen  am 19. April 2025 von https://www.tpgi.com/color-contrast-checker/