Eine Website auf Barrierefreiheit zu prüfen klingt zunächst nach einer Aufgabe für Spezialisten.

WCAG verstehen, HTML untersuchen, Screenreader bedienen, Kontrastwerte berechnen – das wirkt schnell komplizierter, als es für einen ersten Check tatsächlich sein muss.

Die gute Nachricht: Für einen grundlegenden Barrierefreiheits-Test brauchst du zunächst weder teure Software noch ein großes Audit.

Es gibt inzwischen einige sehr gute kostenlose Tools, mit denen sich typische Probleme schnell aufspüren lassen.

Sie finden beispielsweise:

• fehlende Alt-Texte,
• schlechte Farbkontraste,
• unbeschriftete Buttons,
• fehlerhafte Formularfelder,
• problematische ARIA-Attribute,
• fehlende Überschriftenstrukturen,
• technische Screenreader-Probleme.

Allerdings gibt es einen wichtigen Haken:

Keines dieser Tools kann dir zuverlässig sagen, dass deine Website vollständig barrierefrei ist.

Ein automatischer Scanner erkennt vielleicht, dass ein Button technisch korrekt beschriftet wurde. Er kann aber nicht immer beurteilen, ob die Beschriftung für einen echten Nutzer verständlich ist.

Er erkennt möglicherweise ein korrekt aufgebautes Menü. Ob du dieses Menü ohne Maus tatsächlich sinnvoll bedienen kannst, musst du trotzdem selbst ausprobieren.

Deshalb schauen wir uns nicht nur einzelne Tools an, sondern auch, wie du sie sinnvoll miteinander kombinierst.

Was können automatische Accessibility-Tools überhaupt prüfen?

Bevor wir zu den einzelnen Werkzeugen kommen, sollte man wissen, was solche Programme leisten können.

Automatische Prüfungen sind besonders gut bei eindeutig technischen Regeln.

Zum Beispiel:

Ein Bild besitzt keinen Alt-Text.

Ein Formularfeld besitzt keine Beschriftung.

Die Sprache der Seite wurde nicht angegeben.

Der Kontrast eines Textes ist zu niedrig.

Eine Überschriftenstruktur weist Auffälligkeiten auf.

Ein Button besitzt keinen zugänglichen Namen.

Solche Probleme lassen sich vergleichsweise zuverlässig erkennen.

Schwieriger wird es bei Fragen wie:

Ist der Alt-Text sinnvoll?

Ist diese Fehlermeldung verständlich?

Ist die Tab-Reihenfolge logisch?

Kann ich den Checkout tatsächlich komplett ohne Maus bedienen?

Ist die Sprache des Textes verständlich?

Ist die Navigation für einen Screenreader sinnvoll aufgebaut?

Hier braucht es den Menschen.

Deshalb lautet eine gute Grundregel:

Automatisch finden, manuell überprüfen.

1. Google Lighthouse

Lighthouse ist wahrscheinlich eines der einfachsten Tools für einen ersten Check.

Wenn du Google Chrome verwendest, musst du normalerweise nicht einmal etwas zusätzlich installieren. Lighthouse ist direkt in den Entwicklertools integriert.

Neben Performance und SEO besitzt Lighthouse auch einen Bereich für Barrierefreiheit.

Was prüft Lighthouse?

Lighthouse kann unter anderem auf Probleme hinweisen bei:

• Farbkontrasten,
• Alt-Texten,
• zugänglichen Namen von Buttons,
• Formularbeschriftungen,
• ARIA-Attributen,
• Dokumentstruktur,
• Spracheinstellungen.

Am Ende erhältst du eine Bewertung und einzelne Hinweise.

So verwendest du Lighthouse

Öffne die Seite, die du prüfen möchtest.

Dann:

1. Rechtsklick auf die Seite.
2. „Untersuchen“ beziehungsweise „Inspect“ öffnen.
3. In den Entwicklertools den Bereich „Lighthouse“ auswählen.
4. Barrierefreiheit beziehungsweise Accessibility aktivieren.
5. Analyse starten.

Nach kurzer Zeit erscheint ein Bericht.

Was gefällt mir an Lighthouse?

Für Anfänger ist das Tool sehr angenehm.

Du bekommst keine riesige Liste ohne Erklärung, sondern kannst einzelne Fehler öffnen und bekommst Hinweise dazu, weshalb sie problematisch sind.

Außerdem ist Lighthouse ohnehin bereits in Chrome vorhanden.

Man muss also nicht zuerst mehrere Erweiterungen installieren.

Wo liegen die Grenzen?

Die Bewertung kann leicht falsche Sicherheit vermitteln.

Wenn dort beispielsweise:

100 Punkte

steht, bedeutet das nicht:

Diese Website ist vollständig barrierefrei.

Es bedeutet lediglich, dass die von Lighthouse automatisch geprüften Punkte keinen entsprechenden Fehler ergeben haben.

Eine Website mit perfektem Lighthouse-Wert kann trotzdem:

• eine schlechte Tastaturnavigation haben,
• unverständliche Alt-Texte besitzen,
• problematische Popups enthalten,
• schlechte Formularmeldungen verwenden.

Deshalb:

Lighthouse ist ein guter Startpunkt.

Nicht der Endpunkt.

2. WAVE

WAVE gehört für mich zu den praktischsten Tools, wenn man sehen möchte, wo sich Probleme auf einer Seite befinden.

Es gibt WAVE als Browser-Erweiterung unter anderem für Chrome, Firefox und Edge.

Nach dem Start legt das Tool Hinweise direkt über die getestete Website.

Das ist gerade für Einsteiger sehr angenehm.

Was zeigt WAVE?

WAVE kann unter anderem Hinweise geben zu:

• Alt-Texten,
• Formularbeschriftungen,
• Überschriften,
• Links,
• Kontrasten,
• ARIA,
• strukturellen Elementen.

Die Fehler und Hinweise werden direkt auf der Seite markiert.

Du siehst also nicht nur:

„Es gibt drei Fehler.“

sondern kannst sofort erkennen, welches Element betroffen ist.

Beispiel

Angenommen, dein Kontaktformular besitzt ein Eingabefeld ohne korrekt zugeordnetes Label.

WAVE markiert dieses Feld direkt auf der Seite.

Das macht die Fehlersuche erheblich einfacher.

Besonders praktisch bei WordPress

Wer WordPress, WooCommerce, Divi, Elementor oder ein anderes CMS nutzt, hat häufig keinen direkten Überblick darüber, welches HTML am Ende tatsächlich ausgegeben wird.

WAVE analysiert die fertig dargestellte Seite.

Dadurch kannst du überprüfen, was Theme und Plugins tatsächlich produzieren.

Auch geschützte Seiten testen

Die Browser-Erweiterung arbeitet direkt im Browser.

Dadurch lassen sich beispielsweise auch Seiten testen, die nicht öffentlich erreichbar sind.

Das kann praktisch sein für:

• Kundenkonten,
• Checkout-Seiten,
• Staging-Websites,
• geschützte Inhalte.

Die Schwäche von WAVE

Auch hier gilt:

Ein Hinweis ist nicht automatisch ein endgültiges Urteil.

Manche Elemente müssen manuell bewertet werden.

Das Tool kann zum Beispiel erkennen, dass ein Bild einen Alt-Text besitzt.

Ob dieser Text sinnvoll lautet:

„Schwarzer Wanderschuh mit Profilsohle“

oder vollkommen nutzlos:

„Bild123“

muss ein Mensch beurteilen.

3. axe DevTools

Ein weiteres bekanntes Werkzeug ist axe DevTools von Deque.

Für einen einfachen Einstieg gibt es eine kostenlose Browser-Erweiterung.

Die kostenlose Version bietet grundlegende automatisierte Prüfungen einzelner Seiten.

Für wen ist axe besonders interessant?

Das Tool eignet sich besonders gut für:

• Entwickler,
• Webdesigner,
• Agenturen,
• technisch interessierte Websitebetreiber.

Die gefundenen Probleme lassen sich relativ detailliert untersuchen.

Du bekommst Informationen dazu:

• welches Element betroffen ist,
• wie schwerwiegend das Problem sein kann,
• welche Regel betroffen ist,
• wie man das Problem beheben könnte.

Was kann die kostenlose Version?

Die kostenlose Erweiterung konzentriert sich auf automatisierte Prüfungen einzelner Seiten.

Für einen normalen Websitebetreiber reicht das bereits aus, um eine Menge typischer Probleme zu entdecken.

Die kostenpflichtigen Varianten bieten zusätzliche Funktionen wie umfangreichere geführte Tests und Workflows.

Für unseren kostenlosen Basischeck brauchen wir diese aber zunächst nicht.

Warum axe zusätzlich zu Lighthouse verwenden?

Man könnte sich fragen:

Wenn Lighthouse schon Accessibility prüft, warum noch ein zweites Werkzeug?

Weil unterschiedliche Tools Ergebnisse unterschiedlich darstellen und teilweise verschiedene Schwerpunkte setzen.

Außerdem verwendet man bei Barrierefreiheit besser nicht nur eine einzige Sichtweise.

Ein praktischer Ablauf kann deshalb sein:

Lighthouse starten.

Danach WAVE.

Anschließend axe.

Wenn mehrere Tools dasselbe Problem melden, sollte man sich diese Stelle auf jeden Fall ansehen.

4. Accessibility Insights for Web

Accessibility Insights for Web ist besonders interessant, weil das Tool versucht, automatische und manuelle Prüfungen stärker miteinander zu verbinden.

Es steht als Browser-Erweiterung für Chrome und Edge zur Verfügung.

Besonders praktisch ist der sogenannte schnelle Test.

FastPass beziehungsweise Schnellprüfung

Damit kannst du innerhalb weniger Minuten einen ersten Überblick bekommen.

Das Tool kombiniert automatische Prüfungen mit einer Untersuchung der Tastaturnavigation.

Gerade das finde ich hilfreich.

Denn die Tastaturbedienung ist eine der Stellen, die bei reinen automatischen Scannern schnell zu kurz kommt.

Tab-Stops sichtbar machen

Accessibility Insights kann dabei helfen, die Tab-Reihenfolge einer Seite zu untersuchen.

So erkennst du beispielsweise:

Button 1.

Button 2.

Link.

Formularfeld.

Plötzlich Footer.

Dann zurück zur Navigation.

Wenn die Reihenfolge völlig unlogisch ist, wird das schnell sichtbar.

Auch fehlende Tab-Stopps und mögliche Tastaturfallen lassen sich damit leichter erkennen.

Umfangreicher Assessment-Modus

Wer tiefer einsteigen möchte, kann zusätzlich einen umfangreicheren Prüfprozess durchlaufen.

Dort werden automatisierte, unterstützte und manuelle Tests kombiniert.

Das ist deutlich zeitaufwendiger als ein Lighthouse-Scan, liefert dafür aber wesentlich mehr Informationen.

Für Anfänger geeignet?

Grundsätzlich ja.

Der schnelle Modus ist relativ einfach.

Für den vollständigen Assessment-Prozess hilft allerdings etwas Wissen über HTML und WCAG.

Ich würde deshalb so anfangen:

Erst FastPass verwenden.

Später die umfangreicheren Tests ausprobieren.

5. WebAIM Contrast Checker

Farbkontraste gehören zu den häufigsten Barrierefreiheitsproblemen.

Besonders typische Kombinationen sind:

• hellgrau auf weiß,
• weiß auf hellblau,
• hellgrün auf weiß,
• dünne graue Schrift auf Bildern.

Das sieht im Design vielleicht elegant aus.

Für Nutzer mit eingeschränktem Sehvermögen kann es jedoch schwer lesbar sein.

Der kostenlose WebAIM Contrast Checker macht die Prüfung sehr einfach.

Wie funktioniert der Test?

Du gibst zwei Farben ein:

Vordergrundfarbe

und

Hintergrundfarbe

Zum Beispiel:

Text:

#666666

Hintergrund:

#FFFFFF

Das Tool berechnet anschließend das Kontrastverhältnis und zeigt, welche Anforderungen erfüllt werden.

Wichtige Richtwerte

Für normalen Text wird bei WCAG Level AA grundsätzlich ein Verhältnis von mindestens:

4,5 : 1

verwendet.

Für großen Text:

3 : 1

Auch grafische Bedienelemente und wichtige UI-Komponenten benötigen in bestimmten Fällen ausreichenden Kontrast.

Wo solltest du Kontrast prüfen?

Nicht nur beim normalen Fließtext.

Schau dir auch diese Bereiche an:

• Buttons,
• Menü,
• Footer,
• Links,
• Preisangaben,
• Formularfelder,
• Fehlermeldungen,
• Fokusrahmen,
• Cookie-Banner,
• Produktvarianten.

Gerade Shops verwenden häufig sehr dezente Farben für Lieferzeiten, alte Preise oder Zusatzinformationen.

6. Chrome DevTools Accessibility

Chrome selbst bietet noch deutlich mehr als Lighthouse.

In den Entwicklertools kannst du einzelne Elemente genauer untersuchen.

Das ist besonders praktisch, wenn ein Button oder Formular technisch merkwürdig reagiert.

Was lässt sich überprüfen?

Bei einem Element kannst du beispielsweise sehen:

• welche Rolle es besitzt,
• welchen zugänglichen Namen es hat,
• ob es fokussierbar ist,
• welche ARIA-Eigenschaften vorhanden sind.

Das hilft bei Problemen wie:

Ein Button sieht korrekt aus.

Der Screenreader sagt aber nur:

„Button.“

Dann kannst du in den Entwicklertools prüfen, welcher zugängliche Name tatsächlich berechnet wird.

Accessibility Tree

Interessant für etwas fortgeschrittenere Nutzer ist der Accessibility Tree.

Dieser zeigt vereinfacht gesagt nicht nur, wie das HTML aufgebaut ist, sondern welche Struktur Hilfstechnologien aus der Seite erhalten.

Damit lassen sich Probleme erkennen, die optisch überhaupt nicht sichtbar sind.

Beispielsweise kann ein Element für einen sehenden Nutzer aussehen wie:

„Filter öffnen“

Im Accessibility Tree kommt aber möglicherweise nur ein namenloser Button an.

Genau solche Fehler sind mit normalen visuellen Tests schwer zu entdecken.

7. W3C Easy Checks

Nicht jedes hilfreiche Werkzeug muss ein automatischer Scanner sein.

Das W3C bietet mit den Easy Checks eine strukturierte Anleitung für einen schnellen ersten Accessibility-Test.

Das ist besonders nützlich, wenn du verstehen möchtest, warum du bestimmte Dinge prüfst.

Dabei geht es beispielsweise um:

• Seitentitel,
• Alt-Texte,
• Überschriften,
• Farbkontraste,
• Textvergrößerung,
• Tastaturzugang,
• sichtbaren Fokus,
• Formulare,
• bewegte Inhalte,
• Multimedia.

Der große Vorteil:

Du lernst gleichzeitig, Barrieren selbst zu erkennen.

Warum manuelle Checklisten so wichtig sind

Ein Scanner kann dir sagen:

„Dieses Bild besitzt einen Alt-Text.“

Die W3C-Prüfung führt dich einen Schritt weiter:

Ist der Alt-Text überhaupt sinnvoll?

Genau deshalb würde ich die Easy Checks nicht als Konkurrenz zu Lighthouse oder WAVE sehen.

Sie ergänzen die automatischen Tools.

8. NVDA Screenreader

Jetzt kommen wir zu einem Werkzeug, vor dem viele Websitebetreiber zunächst etwas Respekt haben.

Ein Screenreader.

Für Windows gibt es mit NVDA einen kostenlosen Screenreader.

Damit kannst du deine Website einmal aus einer völlig anderen Perspektive erleben.

Was macht ein Screenreader?

Ein Screenreader liest nicht einfach nur alles vor, was optisch auf dem Bildschirm steht.

Er arbeitet mit der zugänglichen Struktur der Website.

Dadurch kann er beispielsweise erkennen:

• Überschriften,
• Links,
• Buttons,
• Formulare,
• Bilder,
• Listen,
• Tabellen,
• Navigationen.

Wenn deine Website technisch schlecht aufgebaut ist, wird das hier schnell deutlich.

Beispiel

Optisch steht dort:

🛒

Für dich ist offensichtlich:

Warenkorb.

NVDA sagt aber vielleicht:

„Button.“

Dann fehlt wahrscheinlich eine verständliche Bezeichnung.

Ein besser umgesetzter Button würde beispielsweise vorgelesen:

„Warenkorb, Button.“

Ein zweites Beispiel

Du hast ein Produktbild.

Alt-Text:

„IMG_2384 final web.webp“

Optisch merkst du davon nichts.

Mit Screenreader hörst du sofort, wie schlecht diese Information ist.

Muss ich NVDA perfekt beherrschen?

Nein.

Für einen ersten Test reicht es, ein paar Grundfunktionen kennenzulernen.

Du musst nicht sofort so arbeiten wie ein erfahrener blinder Nutzer.

Schon wenn du:

• eine Seite öffnest,
• Überschriften anhörst,
• durch Links navigierst,
• Formulare ausprobierst,
• einen Checkout testest,

bekommst du ein völlig neues Gefühl für die Website.

9. Der kostenlose Tastaturtest

Eigentlich ist das kein Tool.

Trotzdem gehört er in diese Liste.

Du brauchst lediglich deine Tastatur.

Und meiner Meinung nach gehört dieser Test zu den wertvollsten Prüfungen überhaupt.

So funktioniert er

Maus zur Seite legen.

Dann nur verwenden:

• Tab,
• Shift + Tab,
• Enter,
• Leertaste,
• Pfeiltasten,
• Escape.

Versuche anschließend einen echten Nutzerweg.

Bei einem Firmenauftritt:

Navigation öffnen.

Leistung auswählen.

Kontaktformular öffnen.

Formular ausfüllen.

Absenden.

Bei einem Shop:

Produkt finden.

Variante auswählen.

In den Warenkorb legen.

Zur Kasse gehen.

Formular ausfüllen.

Zahlungsart auswählen.

Bestellung bis zum letzten Schritt durchführen.

Was solltest du beobachten?

Bei jedem Tab-Schritt:

Sehe ich, wo ich gerade bin?

Ist die Reihenfolge sinnvoll?

Kann ich das Element bedienen?

Kann ich wieder zurück?

Wenn nicht, hast du eine Barriere gefunden.

10. Browser-Zoom als kostenloser Test

Noch ein extrem einfacher Test:

Vergrößere deine Website im Browser.

Zum Beispiel auf:

200 Prozent

Dann prüfe:

• Überlappen Texte?
• Werden Buttons abgeschnitten?
• Ist das Menü noch erreichbar?
• Funktionieren Formulare?
• Muss unnötig horizontal gescrollt werden?
• Verdecken Sticky-Elemente den Inhalt?
• Funktioniert das Cookie-Banner?

Viele Layoutprobleme werden erst bei Vergrößerung sichtbar.

Das ist besonders interessant bei:

• Pagebuilder-Websites,
• WooCommerce-Shops,
• komplexen Headern,
• Popups,
• Tabellen.

Welches kostenlose Tool ist das beste?

Darauf gibt es keine eindeutige Antwort.

Es hängt davon ab, was du prüfen möchtest.

Für den schnellen Einstieg

Lighthouse

Sehr einfach, bereits in Chrome vorhanden und schnell.

Für visuelle Fehlersuche

WAVE

Sehr praktisch, weil Fehler direkt auf der Website angezeigt werden.

Für Entwickler

axe DevTools

Technisch detailliert und gut geeignet, um konkrete Fehler zu untersuchen.

Für Tastatur und strukturierte Tests

Accessibility Insights for Web

Sehr hilfreich durch die Kombination aus automatischen und unterstützten Prüfungen.

Für Farbkontraste

WebAIM Contrast Checker

Einfach und schnell.

Für technische Detailanalyse

Chrome DevTools Accessibility

Gut für Rollen, Namen, ARIA und Accessibility Tree.

Für manuelles Lernen

W3C Easy Checks

Sehr hilfreich, um selbst ein Gefühl für Barrierefreiheit zu entwickeln.

Für Screenreader-Tests unter Windows

NVDA

Ein wertvolles Werkzeug für die praktische Prüfung.

Warum ein Tool allein nicht reicht

Nehmen wir eine Website mit einem Kontaktformular.

Lighthouse meldet:

Keine Fehler.

WAVE meldet:

Keine kritischen Fehler.

axe meldet:

Keine automatisiert erkennbaren Fehler.

Ist das Formular jetzt barrierefrei?

Nicht unbedingt.

Vielleicht lautet die Fehlermeldung:

„Error.“

Vielleicht springt nach dem Absenden der Fokus zum Seitenanfang.

Vielleicht verschwindet der eingegebene Text.

Vielleicht kann das Datenschutz-Kästchen nicht mit Leertaste aktiviert werden.

Vielleicht sagt der Screenreader bei der Schaltfläche:

„Button 12.“

Genau deshalb braucht es mehrere Testmethoden.

Mein kostenloser Testablauf für eine Website

Wenn du deine Website selbst prüfen möchtest, würde ich nicht zehn Tools wahllos starten.

Ein strukturierter Ablauf ist besser.

Schritt 1: Lighthouse

Starte einen Accessibility-Scan.

Notiere alle gefundenen Probleme.

Schritt 2: WAVE

Prüfe dieselbe Seite.

Achte besonders auf:

• Alt-Texte,
• Überschriften,
• Formulare,
• ARIA,
• Kontraste.

Schritt 3: axe DevTools

Führe einen weiteren automatischen Test durch.

Prüfe technische Fehler genauer.

Schritt 4: Kontrast

Nimm problematische Farben und überprüfe sie gezielt mit einem Contrast Checker.

Schritt 5: Tastatur

Jetzt Maus weglegen.

Teste die komplette Seite.

Schritt 6: Vergrößerung

Browser auf 200 Prozent stellen.

Wieder durch die Seite gehen.

Schritt 7: Screenreader

Zumindest die wichtigsten Seiten einmal mit NVDA oder einem anderen Screenreader anhören.

Dieser Ablauf kostet nichts und findet bereits erstaunlich viele Probleme.

Welche Seiten solltest du zuerst testen?

Bei einer Website mit 500 Unterseiten musst du nicht mit jeder Seite beginnen.

Teste zunächst verschiedene Seitentypen.

Zum Beispiel:

Normale Unternehmenswebsite

• Startseite
• Leistungsseite
• Kontakt
• Formular
• Blogartikel

Online-Shop

• Startseite
• Kategorie
• Produktseite
• Warenkorb
• Checkout
• Kundenkonto

Website mit Terminbuchung

• Startseite
• Leistungsseite
• Kalender
• Buchungsformular
• Bestätigung

Wenn mehrere Seiten dieselbe Vorlage verwenden, wiederholen sich viele Fehler ohnehin.

WordPress-Websites richtig testen

Bei WordPress sollte nicht nur der Inhalt geprüft werden.

Viele Barrieren entstehen durch:

• Theme,
• Pagebuilder,
• Plugins,
• Navigation,
• Cookie-Tool,
• Formulare.

Besonders wichtig:

Prüfe immer die veröffentlichte Seite im Frontend.

Ein Alt-Text kann in der Medienbibliothek eingetragen sein und durch ein Plugin trotzdem anders ausgegeben werden.

Ein Theme kann behaupten, accessibility-ready zu sein, während ein zusätzliches Menü-Plugin die Tastaturbedienung zerstört.

Der fertige Browser-Output zählt.

WooCommerce-Shops testen

Bei WooCommerce würde ich zusätzlich echte Kaufwege prüfen.

Zum Beispiel:

1. Kategorie öffnen.
2. Filter verwenden.
3. Produkt öffnen.
4. Bildergalerie bedienen.
5. Variante auswählen.
6. Menge ändern.
7. Warenkorb öffnen.
8. Gutschein testen.
9. Checkout ausfüllen.
10. Versand wählen.
11. Zahlung auswählen.

Dabei am besten mindestens einmal komplett ohne Maus.

Ein automatischer Scan einer Produktseite sagt wenig darüber aus, ob der gesamte Kaufprozess funktioniert.

Cookie-Banner nicht vergessen

Wenn du deine Website regelmäßig besuchst, siehst du das Cookie-Banner möglicherweise gar nicht mehr.

Für neue Besucher ist es aber das erste interaktive Element.

Öffne deshalb ein privates Browserfenster.

Teste:

• Tab-Reihenfolge,
• sichtbaren Fokus,
• Ablehnen,
• Akzeptieren,
• Einstellungen,
• Schalter,
• Speichern.

Wenn du am Cookie-Banner hängenbleibst, ist der Rest der Seite fast egal.

Automatische Bewertungen richtig interpretieren

Besonders bei Lighthouse entsteht schnell ein Wettbewerb:

Mein Accessibility Score ist 100.

Das sieht natürlich gut aus.

Aber Barrierefreiheit ist kein klassischer Performance-Wert.

Ein Score von 100 bedeutet nicht automatisch:

100 Prozent barrierefrei.

Er bedeutet:

Die automatisch überprüften Kriterien wurden entsprechend bestanden.

Das ist ein wichtiger Unterschied.

Deshalb sollte man Scores als:

Hinweis

und nicht als:

Zertifikat

betrachten.

Vorsicht vor „Website ist zu 96 % barrierefrei“

Manche Tools oder Anbieter geben sehr präzise Prozentwerte aus.

Zum Beispiel:

Ihre Website ist zu 94 % barrierefrei.

Solche Zahlen wirken beeindruckend.

Die Realität lässt sich aber nicht so einfach auf einen Prozentsatz reduzieren.

Eine einzige Barriere kann viel schwerwiegender sein als zehn kleinere technische Hinweise.

Beispiel:

Zehn dekorative Bilder besitzen unnötige Alt-Texte.

Das ist nicht ideal.

Aber:

Der Bestellbutton ist nicht per Tastatur erreichbar.

Dieser eine Fehler kann für bestimmte Nutzer den gesamten Einkauf verhindern.

Die reine Anzahl der Fehler sagt deshalb wenig über deren tatsächliche Auswirkung aus.

Fehler nach Schwere priorisieren

Wenn ein Tool 80 Hinweise findet, solltest du nicht zwangsläufig oben anfangen und sie der Reihe nach abarbeiten.

Eine bessere Reihenfolge:

Priorität 1: Nutzer kommt nicht weiter

Zum Beispiel:

• Menü nicht per Tastatur erreichbar,
• Formular nicht bedienbar,
• Checkout blockiert,
• Popup nicht schließbar,
• Zahlungsart nicht auswählbar.

Priorität 2: wichtige Informationen fehlen

Zum Beispiel:

• Produktbilder ohne Alt-Texte,
• Formularfelder ohne Labels,
• Fehlermeldungen nicht verständlich,
• wichtige PDFs unzugänglich.

Priorität 3: Orientierung

Zum Beispiel:

• schlechte Überschriftenstruktur,
• unklare Links,
• Fokus schlecht sichtbar.

Priorität 4: kleinere Verbesserungen

Danach kommen weniger kritische Einzelprobleme.

Tools ersetzen kein echtes Nutzerverhalten

Das sollte man sich immer wieder bewusst machen.

Automatisches Tool:

Button besitzt zugänglichen Namen.

Mensch:

Ja, aber der Name lautet „Weiter“ und niemand weiß, wohin.

Automatisches Tool:

Bild besitzt Alt-Text.

Mensch:

Ja, aber er lautet „Produktbild“.

Automatisches Tool:

Formularfeld besitzt Label.

Mensch:

Ja, aber die Fehlermeldung erscheint drei Bildschirme weiter oben.

Genau deshalb ist die Kombination entscheidend.

Ein 30-Minuten-Barrierefreiheits-Check

Wenn du wenig Zeit hast, kannst du trotzdem einen sinnvollen Schnelltest durchführen.

Minute 1–5

Lighthouse auf der Startseite.

Minute 5–10

WAVE auf einer wichtigen Inhaltsseite.

Minute 10–15

WebAIM Contrast Checker für kritische Farben.

Minute 15–20

Komplette Seite nur mit Tastatur bedienen.

Minute 20–25

Website auf 200 Prozent vergrößern.

Minute 25–30

Kontaktformular oder Checkout mit absichtlichen Fehlern testen.

Schon nach diesen 30 Minuten hast du häufig eine ziemlich brauchbare Liste mit Baustellen.

Kostenlose Tools: kurze Übersicht

Lighthouse

Gut für: schnellen technischen Einstieg
Kosten: kostenlos
Schwierigkeit: einfach
Besonders hilfreich: automatisierte Basisprüfung

WAVE

Gut für: visuelle Fehlersuche
Kosten: kostenlos nutzbare Browser-Erweiterung
Schwierigkeit: einfach bis mittel
Besonders hilfreich: direkte Markierungen auf der Seite

axe DevTools

Gut für: Entwickler und technische Prüfung
Kosten: kostenlose Basisversion verfügbar
Schwierigkeit: mittel
Besonders hilfreich: detaillierte technische Fehleranalyse

Accessibility Insights for Web

Gut für: automatische und manuelle Prüfungen
Kosten: kostenlos
Schwierigkeit: mittel
Besonders hilfreich: Tab-Reihenfolge und strukturierter Test

WebAIM Contrast Checker

Gut für: Farbkontraste
Kosten: kostenlos
Schwierigkeit: sehr einfach
Besonders hilfreich: Text- und Hintergrundfarben

Chrome DevTools Accessibility

Gut für: technische Detailprüfung
Kosten: kostenlos
Schwierigkeit: mittel bis fortgeschritten
Besonders hilfreich: Rollen, Namen, ARIA, Accessibility Tree

W3C Easy Checks

Gut für: manuellen Einstieg
Kosten: kostenlos
Schwierigkeit: einfach
Besonders hilfreich: Barrierefreiheit verstehen lernen

NVDA

Gut für: Screenreader-Test
Kosten: kostenlos
Schwierigkeit: anfangs mittel
Besonders hilfreich: tatsächliche Screenreader-Ausgabe

Praktische Checkliste für deinen Test

Am Ende sollte nicht nur eine Tool-Liste stehen.

Prüfe mindestens:

• Hat jede Seite einen sinnvollen Titel?
• Ist die Überschriftenstruktur logisch?
• Haben informative Bilder sinnvolle Alt-Texte?
• Sind dekorative Bilder korrekt behandelt?
• Stimmen die Farbkontraste?
• Ist Text bei Vergrößerung noch nutzbar?
• Funktioniert die Navigation ohne Maus?
• Ist der Fokus sichtbar?
• Funktionieren Dropdowns und Menüs?
• Sind Formularfelder beschriftet?
• Sind Fehlermeldungen verständlich?
• Funktionieren Popups mit Tastatur?
• Ist das Cookie-Banner bedienbar?
• Funktioniert die mobile Ansicht?
• Sind Buttons und Links verständlich benannt?
• Ist die Screenreader-Ausgabe nachvollziehbar?

Fazit: Kostenlose Tools finden viel – aber nicht alles

Eine erste Prüfung auf Barrierefreiheit muss nicht teuer sein.

Mit Werkzeugen wie Lighthouse, WAVE, axe, Accessibility Insights und einem Contrast Checker lassen sich bereits viele technische Fehler entdecken.

Dazu kommen Werkzeuge, die sowieso vorhanden oder kostenlos verfügbar sind:

Browser-Zoom.

Tastatur.

Chrome DevTools.

NVDA.

Der entscheidende Punkt ist jedoch:

Verlass dich nicht auf ein einzelnes Tool.

Ein grüner Score ist kein Beweis dafür, dass eine Website für jeden Menschen gut nutzbar ist.

Mein praktischer Ansatz wäre deshalb:

Erst automatisch prüfen. Danach selbst benutzen.

Starte Lighthouse und WAVE.

Behebe offensichtliche technische Probleme.

Lege anschließend die Maus weg.

Vergrößere die Website.

Provoziere Formularfehler.

Und höre dir zumindest einmal eine wichtige Seite mit einem Screenreader an.

Genau diese Kombination zeigt dir viel besser, wie zugänglich deine Website wirklich ist, als irgendeine einzelne Prozentzahl.

Und selbst wenn danach noch kein vollständiges professionelles Audit ersetzt wurde, hast du bereits einen großen Vorteil:

Du weißt, wo die größten Probleme deiner Website liegen – und kannst anfangen, sie gezielt zu beheben.

Hinweis: Ein Selbsttest mit kostenlosen Tools bietet eine gute erste Orientierung, ersetzt jedoch keine vollständige fachliche Prüfung oder rechtliche Beratung zur konkreten Anwendung von Barrierefreiheitsvorgaben.