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. Laut Statistischem Bundesamt lebten Ende 2023 rund 7,9 Millionen Menschen in Deutschland mit einer schweren Behinderung. Dazu kommen viele weitere mit Sehschwächen, motorischen Einschränkungen oder kognitiven Beeinträchtigungen. Ist Ihre Website nicht barrierefrei, schließen Sie diese Menschen als Kunden aus. Fällt Ihr Angebot unter das Barrierefreiheitsstärkungsgesetz (BFSG), gilt seit Juni 2025 außerdem eine gesetzliche Pflicht.
Kurz gesagt: Eine barrierefreie Website testen Sie in zwei Schritten. Zuerst scannen kostenlose Tools wie Google Lighthouse, WAVE oder axe DevTools die Seite auf Fehler wie fehlende Alt-Texte und schwache Kontraste. Danach prüfen Sie von Hand mit Tastatur, Screenreader und 200 Prozent Zoom, denn viele Barrieren erkennt nur ein Mensch.
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 einen Teil der Barrieren. Den Rest kann nur ein manueller Test mit Tastatur und Screenreader aufdecken.
In diesem Beitrag erfahren Sie, welche Tools sich eignen, wie ein gründlicher 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. Wie wir Websites barrierefrei umsetzen und prüfen, zeigt die Leistung Barrierefreie Website.
Mit welchen Tools testen Sie eine Website auf Barrierefreiheit?
Für den ersten Überblick reichen kostenlose Tools wie Google Lighthouse, WAVE und axe DevTools. Sie scannen Ihre Website in Sekunden und liefern eine Liste konkreter 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.
Welche Tests von Hand brauchen Sie zusätzlich?
Zusätzlich brauchen Sie vier Tests von Hand: Tastatur, Screenreader, Zoom und Kontrast. Sie decken die Barrieren auf, die automatische Tools übersehen. Automatisierte Tools sind der Anfang, nicht das Ergebnis.
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 Methoden im Vergleich:
| Prüfmethode | Was sie findet | Was sie übersieht |
|---|---|---|
| Automatische Tools (Lighthouse, WAVE, axe) | Fehlende Alt-Texte, zu schwache Kontraste, fehlende Formular-Labels, falsche Reihenfolge der Überschriften | Ob Texte und Alt-Texte inhaltlich stimmen und ob die Bedienung logisch ist |
| Tastatur-Test | Unerreichbare Menüs und Buttons, fehlende Fokusanzeige, Stellen, an denen der Fokus hängen bleibt | Probleme, die erst beim Vorlesen auffallen |
| Screenreader-Test | Falsche Lesereihenfolge, unbeschriftete Bedienelemente, unklare Linktexte | Optische Probleme wie Kontraste |
| Zoom-Test (200 Prozent) | Abgeschnittene Inhalte, überlappende Elemente, waagerechtes Scrollen | Bedienbarkeit ohne Maus |
| Kontrast-Check | Zu helle Schrift auf Buttons, in Platzhaltern und Fehlermeldungen | Fehler in der Struktur des Codes |
Was gehört auf die Checkliste für eine barrierefreie Website?
Auf die Checkliste gehören die zehn Punkte, an denen Unternehmenswebsites am häufigsten scheitern. Sie decken die wichtigsten Kriterien der WCAG 2.1 auf Stufe AA ab, des Standards, an dem sich Prüfungen in der Praxis orientieren. Wer ohnehin prüft, nimmt am besten auch den Datenschutz mit: die Checkliste für eine DSGVO-konforme Website.
- 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.
Warum reichen automatisierte Tests allein nicht aus?
Automatisierte Tests verstehen keinen Zusammenhang. Sie prüfen, ob etwas vorhanden ist, aber nicht, ob es für Menschen funktioniert. Drei blinde Flecken bleiben.
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 Tastatur-Test gehört deshalb zu jedem Update, genauso wie die übrige WordPress Wartung.
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.
Mindestens einmal im Jahr
Planen Sie mindestens einmal im Jahr einen vollständigen Test ein und aktualisieren Sie danach die Erklärung zur Barrierefreiheit. So bleiben Website und Erklärung auf demselben Stand.
Aus unseren Projekten: Bei Unternehmenswebsites, die wir prüfen, scheitert der Test selten an exotischen Details. Meist sind es dieselben Punkte: fehlende Formular-Labels, zu schwache Kontraste bei Buttons und Menüs, die sich nicht mit der Tastatur öffnen lassen. Wer diese drei behebt, macht den größten Schritt nach vorn.
Alle Ratgeber zu Sicherheit, Datenschutz und Technik finden Sie in der Übersicht Website-Sicherheit, Recht und Technik.
Häufige Fragen zum Test der Barrierefreiheit
Kann ich die Barrierefreiheit meiner Website kostenlos testen?
Ja, für einen ersten Überblick. Google Lighthouse ist in Chrome eingebaut, WAVE und axe DevTools gibt es als kostenlose Browser-Erweiterungen, und der Screenreader NVDA ist für Windows kostenlos. Für einen belastbaren Befund kommen die Tests von Hand aus diesem Beitrag dazu.
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 nur einen Teil der Probleme auf. Für den Rest sind Tests von Hand mit Tastatur und Screenreader nötig.
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 eine vollständige Prüfung, die alle Kriterien der WCAG-Stufe AA abdeckt und belastbar dokumentiert ist, empfiehlt sich ein professioneller Test. Besonders bei Screenreader-Tests und der Bewertung dynamischer Inhalte fehlt Laien oft die Erfahrung.
Was kostet ein professioneller Test der Barrierefreiheit?
Das hängt von der Zahl der Seitenvorlagen, von interaktiven Elementen wie Formularen oder Shop und von der Prüftiefe ab. Ein automatischer Schnelltest braucht weniger Aufwand als ein vollständiger Test von Hand mit Screenreader und schriftlichem Bericht. Die Preistreiber im Einzelnen zeigt der Beitrag 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 und damit nur einen Teil der 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. Halten Sie die Erklärung nach jedem größeren Update aktuell.
Nächster Schritt: Ihre Website soll die BFSG-Anforderungen nicht nur bestehen, sondern daraus einen Vorteil machen? Wie wir dabei vorgehen, zeigt die Seite Barrierefreie Website.
