Website Barrierefreiheit prüfen – warum „sieht doch gut aus” nicht reicht
Ihre Website lädt schnell, sieht modern aus und funktioniert auf dem Smartphone. Trotzdem kann sie für Millionen Menschen unbenutzbar sein. 7,8 Millionen Menschen in Deutschland leben mit einer schweren Behinderung. Dazu kommen Millionen weitere mit Sehschwächen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Wenn Ihre Website Barrierefreiheit nicht erfüllt, schließen Sie diese Nutzer aus – und verstoßen seit Juni 2025 möglicherweise gegen geltendes Recht.
Die Website auf Barrierefreiheit zu prüfen ist der erste Schritt. Aber wie testet man etwas, das man selbst nicht sieht? Automatisierte Tools finden nur 30 bis 40 Prozent aller Barrieren. Den Rest kann nur ein manueller Test mit Tastatur und Screenreader aufdecken.
In diesem Beitrag erfahren Sie, welche Tools sich wirklich eignen, wie ein professioneller Barrierefreiheits-Test abläuft, und warum ein einmaliger Check nicht ausreicht. Am Ende haben Sie eine klare Anleitung – und wissen, ob Sie selbst testen können oder einen Experten brauchen.
Keine Zeit für Selbsttests? Professionellen Barrierefreiheits-Check anfordern.
Automatisierte Tools – der schnelle Überblick
Automatisierte Barrierefreiheits-Tools scannen Ihre Website innerhalb von Sekunden und liefern einen ersten Überblick über bestehende Probleme. Sie sind der richtige Einstieg – aber nie das vollständige Bild.
Google Lighthouse
Lighthouse ist direkt in Chrome integriert. Öffnen Sie die Entwicklertools, wählen Sie den Tab „Lighthouse” und starten Sie einen Accessibility-Audit. In wenigen Sekunden erhalten Sie einen Score von 0 bis 100 und eine Liste konkreter Probleme mit Handlungsempfehlungen.
Stärken: Kostenlos, sofort verfügbar, gut dokumentiert. Prüft Kontraste, Alt-Texte, ARIA-Attribute und Heading-Struktur.
Schwächen: Erkennt keine inhaltlichen Probleme. Ob ein Alt-Text korrekt beschreibt, was auf dem Bild zu sehen ist, kann Lighthouse nicht beurteilen. Ebenso wenig, ob die Tab-Reihenfolge logisch ist.
WAVE – Web Accessibility Evaluation Tool
WAVE zeigt Barrierefreiheits-Probleme direkt auf der Seite an – farbcodiert und visuell verständlich. Fehler werden rot markiert, Warnungen gelb, korrekt umgesetzte Elemente grün. Das macht WAVE besonders intuitiv.
Verfügbar als Browser-Extension für Chrome und Firefox oder als Online-Tool unter wave.webaim.org. Die Ergebnisse zeigen nicht nur das Problem, sondern erklären auch, warum es ein Problem ist und wie es behoben werden kann.
axe DevTools
axe ist das Tool der Wahl für Entwickler. Es integriert sich in die Browser-Entwicklertools und liefert extrem detaillierte Ergebnisse mit Referenzen zu den entsprechenden WCAG-Kriterien. Die kostenlose Version deckt die meisten Standardprüfungen ab.
Besonders nützlich: axe zeigt den betroffenen HTML-Code direkt an und gibt konkreten Fix-Code vor. Das spart Entwicklungszeit bei der Umsetzung.
Pa11y – für automatisierte CI/CD-Integration
Pa11y ist ein Node.js-basiertes Tool, das sich in automatisierte Build-Prozesse integrieren lässt. Bei jedem Deployment wird automatisch ein Barrierefreiheits-Test durchgeführt. Fallen neue Fehler auf, schlägt der Build fehl.
Das ist relevant für Websites, die regelmäßig aktualisiert werden. Neue Inhalte, neue Funktionen, Plugin-Updates – all das kann bestehende Barrierefreiheit brechen. Pa11y fängt diese Probleme ab, bevor sie live gehen.
eRecht24 Barrierefreiheits-Scanner
Speziell auf den deutschen Markt und das BFSG zugeschnitten. Der Scanner prüft, ob eine Website die Anforderungen des Barrierefreiheitsstärkungsgesetzes erfüllt, und kategorisiert die Ergebnisse in Fehler, Hinweise und korrekt umgesetzte Funktionen.
Manuelle Tests – was Maschinen nicht sehen können
Automatisierte Tools sind der Anfang, nicht das Ergebnis. Die folgende manuelle Prüfung deckt die restlichen 60 bis 70 Prozent der Barrierefreiheits-Probleme auf.
Der Tastatur-Test
Schließen Sie Ihre Maus an den Bildschirmrand und navigieren Sie Ihre gesamte Website nur mit der Tastatur. Tab zum nächsten Element, Shift+Tab zurück, Enter zum Aktivieren, Escape zum Schließen.
Prüfen Sie dabei: Erreichen Sie jedes interaktive Element? Gibt es eine sichtbare Fokusanzeige bei jedem Element? Funktionieren alle Dropdown-Menüs und Modals? Können Sie Formulare ausfüllen und absenden? Gibt es Stellen, an denen der Fokus „gefangen” ist?
Wenn Sie an irgendeiner Stelle nicht weiterkommen oder nicht wissen, wo der Fokus gerade ist – haben Sie eine Barriere gefunden.
Der Screenreader-Test
Screenreader wie NVDA (kostenlos für Windows), VoiceOver (vorinstalliert auf Mac und iOS) oder TalkBack (Android) lesen den Inhalt einer Website vor. Was sie vorlesen, basiert auf dem HTML-Code – nicht auf dem visuellen Design.
Starten Sie einen Screenreader und hören Sie Ihrer Website zu. Werden Überschriften als Überschriften erkannt? Werden Bilder mit ihren Alt-Texten vorgelesen? Werden Formularlabels korrekt zugeordnet? Ergibt die Vorlesereihenfolge inhaltlich Sinn?
Dieser Test ist augenöffnend. Viele Websites, die visuell perfekt funktionieren, sind für Screenreader ein unstrukturiertes Chaos.
Der Zoom-Test
Vergrößern Sie Ihre Website auf 200 Prozent. Bleibt der gesamte Inhalt lesbar? Werden Texte korrekt umgebrochen? Verschwinden Inhalte hinter dem Bildschirmrand? Überlappen sich Elemente? WCAG 2.1 Level AA verlangt, dass alle Inhalte bei 200 Prozent Zoom ohne horizontales Scrollen zugänglich bleiben.
Der Kontrast-Check
Prüfen Sie die Kontrastverhältnisse Ihrer Website mit dem WebAIM Contrast Checker. Normaler Text braucht mindestens 4,5:1, großer Text (ab 18px bold oder 24px regular) mindestens 3:1. Überprüfen Sie nicht nur Fließtext, sondern auch Buttons, Placeholder-Text in Formularen, Links und Fehlermeldungen.
Die Barrierefreiheits-Checkliste – die zehn wichtigsten Punkte
Diese Checkliste deckt die kritischsten WCAG 2.1 Level AA Kriterien für Unternehmenswebsites ab. Für die vollständige BFSG-Checkliste mit allen Anforderungen lesen Sie unseren Beitrag BFSG Checkliste für Unternehmen.
- Alt-Texte: Jedes informative Bild hat einen beschreibenden Alt-Text. Dekorative Bilder haben alt=”” (leerer Alt-Text).
- Heading-Hierarchie: Die Seite hat genau eine H1. Headings folgen der logischen Reihenfolge H1 → H2 → H3, ohne Ebenen zu überspringen.
- Kontraste: Alle Texte erfüllen das Mindest-Kontrastverhältnis von 4,5:1 (3:1 für großen Text).
- Tastaturnavigation: Alle interaktiven Elemente sind per Tab erreichbar und per Enter aktivierbar. Sichtbarer Fokusindikator vorhanden.
- Formulare: Jedes Eingabefeld hat ein zugeordnetes Label-Element. Fehlermeldungen sind spezifisch und hilfreich.
- Seitensprache: Das
lang-Attribut im<html>-Tag ist korrekt gesetzt (z.B.lang="de"). - Link-Texte: Kein „hier klicken” – jeder Link beschreibt sein Ziel. Screenreader-Nutzer navigieren oft über Link-Listen.
- Video und Audio: Videos haben Untertitel. Audio-Inhalte haben Transkripte.
- Responsive Zoom: Bei 200 Prozent Zoom ist kein horizontales Scrollen nötig und keine Information geht verloren.
- Skip-Navigation: Ein „Zum Inhalt springen”-Link am Seitenanfang ermöglicht es Tastaturnutzern, die Navigation zu überspringen.
Checkliste bestanden? Fehlgeschlagen? Lassen Sie uns gemeinsam prüfen, was zu tun ist.
Warum automatisierte Tests allein nicht reichen – die drei blinden Flecken
Blinder Fleck eins: Kontextverständnis
Ein automatisierter Test kann prüfen, ob ein Alt-Text vorhanden ist. Er kann nicht prüfen, ob der Alt-Text korrekt beschreibt, was auf dem Bild zu sehen ist. „Bild” ist technisch ein Alt-Text – aber für einen Screenreader-Nutzer ist er wertlos.
Blinder Fleck zwei: Nutzererfahrung
Die Tab-Reihenfolge kann technisch korrekt sein und trotzdem keinen Sinn ergeben. Wenn der Fokus von der Hauptnavigation zum Footer springt und dann zurück zum Seiteninhalt, ist die Seite technisch „tastaturzugänglich” – aber praktisch unbenutzbar.
Blinder Fleck drei: Dynamische Inhalte
JavaScript-basierte Inhalte – Modals, Dropdown-Menüs, Akkordeons, Live-Updates – werden von automatisierten Tools oft nicht vollständig erfasst. Die Interaktion mit diesen Elementen muss manuell getestet werden.
Wie oft sollten Sie Ihre Website auf Barrierefreiheit testen?
Bei jedem größeren Update
Neue Seiten, neue Funktionen, Plugin-Updates, Design-Änderungen – jede Veränderung kann bestehende Barrierefreiheit beeinflussen. Ein schneller Check mit Lighthouse und einem manuellen Tastatur-Test sollte Teil jedes Deployment-Prozesses sein.
Mindestens einmal pro Quartal
Ein vollständiger Audit mit automatisierten und manuellen Tests deckt schleichende Probleme auf. Neue Inhalte, die ohne Barrierefreiheits-Bewusstsein erstellt wurden, sammeln sich über Wochen an.
Pflicht: Mindestens jährlich
Das BFSG verlangt, dass die Barrierefreiheitserklärung mindestens einmal jährlich überprüft und aktualisiert wird. Das setzt implizit voraus, dass auch die Website selbst mindestens jährlich geprüft wird.
Professioneller Barrierefreiheits-Audit für Ihre Website
Automatisierte Analyse + manueller Experten-Test + priorisierter Maßnahmenkatalog. Wissen Sie in 48 Stunden, wo Sie stehen.
Häufig gestellte Fragen zum Barrierefreiheits-Test
Welches Tool ist das beste für einen Barrierefreiheits-Test?
Es gibt kein einzelnes bestes Tool. Die Kombination macht den Unterschied: Lighthouse für den schnellen Überblick, WAVE für die visuelle Analyse, axe DevTools für technische Details. Automatisierte Tools decken etwa 30 bis 40 Prozent der Probleme auf. Für die restlichen 60 bis 70 Prozent sind manuelle Tests mit Tastatur und Screenreader erforderlich.
Kann ich meine Website selbst auf Barrierefreiheit testen?
Die grundlegenden Tests – Tastaturnavigation, Kontrast-Check, Alt-Text-Prüfung – können Sie selbst durchführen. Für einen vollständigen WCAG-Audit, der alle 50 Level-AA-Kriterien abdeckt und rechtlich belastbar ist, empfiehlt sich ein professioneller Test. Besonders bei Screenreader-Tests und der Bewertung dynamischer Inhalte fehlt Laien oft die Erfahrung.
Was kostet ein professioneller Barrierefreiheits-Audit?
Ein professioneller Audit mit automatisierter Analyse, manuellem Test und priorisiertem Maßnahmenkatalog kostet je nach Umfang der Website zwischen 1.000 und 5.000 Euro. Für größere Websites mit Online-Shop oder komplexen Formularen kann der Aufwand höher liegen. Die Investition spart langfristig Kosten, weil Probleme systematisch statt punktuell behoben werden. Mehr zu den Kosten für barrierefreies Webdesign.
Mein Lighthouse-Score ist 100 – bin ich barrierefrei?
Ein perfekter Lighthouse-Score bedeutet nicht, dass Ihre Website vollständig barrierefrei ist. Lighthouse prüft nur automatisierbare Kriterien – etwa 30 bis 40 Prozent aller WCAG-Anforderungen. Inhaltliche Qualität von Alt-Texten, logische Tab-Reihenfolge, Screenreader-Kompatibilität dynamischer Inhalte und kognitive Verständlichkeit werden nicht geprüft.
Wie erstelle ich eine Barrierefreiheitserklärung?
Die Barrierefreiheitserklärung beschreibt den Konformitätsstand Ihrer Website, benennt bekannte Einschränkungen und bietet einen Feedbackmechanismus für Nutzer. Sie wird als eigenständige Seite erstellt und im Footer verlinkt. Das BFSG verlangt, dass die Erklärung „in gut erkennbarer Weise” verfügbar ist. Eine professionelle Vorlage und regelmäßige Aktualisierung sind Pflicht.
