Barrierefreie Website testen
Sie wollen wissen, ob Ihre Website barrierefrei ist, und suchen eine Checkliste, die mehr ist als ein Scanner-Ergebnis. Hier finden Sie den Selbsttest Schritt für Schritt, kostenlose Werkzeuge für jede Prüfung und eine ehrliche Einordnung, was ein Selbsttest leisten kann und wann eine formale Prüfung nötig ist.
- Selbsttest in neun SchrittenTastatur, Zoom, Kontrast, Struktur
- Kostenlose WerkzeugeScanner, Kontrastprüfung, Screenreader
- Grenzen kennenWas kein Tool automatisch findet
- Automatischer ScanMinuten je Seite, findet nur einen Teil der Barrieren. EINSTIEG
- Manueller SelbsttestTastatur, Zoom, Kontrast, Struktur und Formulare von Hand. KERN
- Screenreader-StichprobeZeigt, ob die Seite auch ohne Bild verständlich ist. VERTIEFUNG
- Formale PrüfungBITV- oder WCAG-Test durch eine Prüfstelle. NACHWEIS
Wogegen Sie testen
Maßstab sind die Web Content Accessibility Guidelines (WCAG) des W3C. Sie ordnen alle Anforderungen vier Prinzipien zu: wahrnehmbar, bedienbar, verständlich und robust. Jedes Erfolgskriterium hat eine Stufe A, AA oder AAA. Gesetze und Normen in der EU verlangen in der Regel die Stufen A und AA. Die europäische Norm EN 301 549, auf die sich BFSG und BITV 2.0 stützen, verweist in der aktuell geltenden Fassung auf WCAG 2.1. Eine neue Fassung auf Basis von WCAG 2.2 ist bereits erschienen. WCAG 2.2 ist abwärtskompatibel: Wer nach 2.2 AA testet, deckt 2.1 mit ab. Ob Ihre Website unter eine gesetzliche Pflicht fällt, erklärt die Seite Barrierefreie Website. Hier geht es um die Technik des Testens. Rechtliche Fragen klären Sie bitte mit einer Fachberatung, dies ist keine Rechtsberatung.
- StartseiteMit Menü, Header, Footer und Cookie-Banner. IMMER
- Typische InhaltsseiteJe Seitenvorlage eine, etwa Leistung und Beitrag. IMMER
- FormulareKontakt, Anmeldung, Suche, Kasse. IMMER
- DokumentePDFs, die Besucher wirklich brauchen. EXTRA
Checkliste: Selbsttest in neun Schritten
Für eine erste belastbare Einschätzung brauchen Sie je Seite etwa eine halbe Stunde. Notieren Sie jeden Fund mit Seite, Stelle und betroffenem Kriterium, dann lassen sich die Fehler später gezielt beheben.
-
1
Automatisch scannen
Prüfen Sie jede ausgewählte Seite mit einem Scanner wie WAVE oder axe DevTools. Beheben Sie eindeutige Fehler wie fehlende Alternativtexte, leere Links oder Felder ohne Beschriftung zuerst.
Hinweise und Warnungen sind keine Fehler, sondern Stellen, die Sie von Hand prüfen müssen.
-
2
Nur mit der Tastatur bedienen
Legen Sie die Maus weg. Gehen Sie mit Tab vorwärts und Umschalt+Tab zurück, lösen Sie Links mit Enter und Schaltflächen mit der Leertaste aus. Menüs, Aufklappbereiche und Dialoge müssen sich öffnen und mit Escape schließen lassen.
Prüfen Sie dabei: Gibt es einen Link zum Überspringen der Navigation? Ist der Fokus immer sichtbar? Bleibt er nirgends hängen? Verdeckt ein fester Header oder der Cookie-Banner das fokussierte Element?
-
3
Vergrößern und umbrechen
Zoomen Sie im Browser auf 200 Prozent. Kein Text darf abgeschnitten werden oder sich überlagern. Gehen Sie dann auf 400 Prozent: Die Seite muss sich in eine Spalte umbrechen, ohne dass Sie waagerecht scrollen müssen.
Ausnahmen gelten nur für Inhalte, die zweidimensional sein müssen, etwa große Tabellen oder Karten.
-
4
Kontraste messen
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5 zu 1, großer Text 3 zu 1. Groß heißt etwa ab 24 Pixel oder ab 18,5 Pixel fett.
Auch Bedienelemente, Formularrahmen, Symbole und die Fokus-Markierung brauchen mindestens 3 zu 1 gegenüber ihrer Umgebung. Prüfen Sie Text auf Bildern und Buttons im Hover-Zustand gesondert.
-
5
Struktur prüfen
Jede Seite braucht einen eindeutigen Seitentitel im Browser-Tab und die richtige Sprachangabe im Code. Überschriften müssen eine logische Gliederung bilden, beginnend mit einer H1. Wer den Seitentitel optisch ausblendet, sollte die Überschrift für Screenreader erhalten, siehe Seitentitel ausblenden.
Links müssen aus sich heraus verständlich sein. „Hier klicken“ oder „Mehr“ ohne Zusammenhang sind Barrieren.
-
6
Bilder und Alternativtexte
Informative Bilder brauchen einen Alternativtext, der den Inhalt oder Zweck beschreibt. Rein dekorative Bilder bekommen einen leeren Alternativtext, damit Screenreader sie überspringen.
Ein Scanner meldet nur fehlende Texte. Ob ein vorhandener Text sinnvoll ist, beurteilt nur ein Mensch.
-
7
Formulare ausfüllen
Jedes Feld braucht eine sichtbare, dauerhafte Beschriftung, nicht nur einen Platzhaltertext. Pflichtfelder müssen als solche erkennbar sein, nicht nur durch Farbe.
Senden Sie das Formular absichtlich fehlerhaft ab. Die Fehlermeldung muss als Text erscheinen, das Feld benennen und sagen, wie es richtig geht. Tipps zur Umsetzung stehen unter Kontaktformular.
-
8
Medien, Bewegung, Zielgrößen
Videos brauchen Untertitel, reine Tonaufnahmen ein Transkript. Was sich länger als fünf Sekunden automatisch bewegt, etwa ein Slider, muss sich anhalten lassen. Nichts darf mehr als dreimal pro Sekunde blinken.
Klickflächen sollten nach WCAG 2.2 mindestens 24 mal 24 Pixel groß sein oder genug Abstand zueinander haben. Testen Sie dazu auch auf dem Smartphone.
-
9
Mit dem Screenreader gegenhören
Nutzen Sie NVDA unter Windows oder VoiceOver auf Mac und iPhone. Springen Sie in NVDA mit der Taste H von Überschrift zu Überschrift. Auf dem Mac öffnet VO+U eine Liste aller Überschriften, Links und Bereiche.
Achten Sie darauf, ob Schaltflächen einen verständlichen Namen haben, ob Bilder sinnvoll beschrieben werden und ob Meldungen nach dem Absenden vorgelesen werden.
Kostenlose Werkzeuge für den Test
Diese Werkzeuge sind kostenlos und verbreitet. Die Auswahl ist keine Rangliste. Nutzen Sie mindestens einen Scanner und ein Kontrastwerkzeug, dazu einen Screenreader.
WAVE
Browser-Erweiterung von WebAIM für Chrome, Firefox und Edge. Markiert Fehler, Warnungen und die Struktur direkt in der Seite. Die Prüfung läuft lokal im Browser.
axe DevTools
Erweiterung von Deque für die Entwicklertools. Die kostenlose Version prüft automatisch und seitenweise. Lighthouse in Chrome nutzt dieselbe Prüf-Bibliothek, zeigt aber nur einen Teil der Regeln.
Accessibility Insights
Kostenlos von Microsoft für Chrome und Edge. FastPass prüft in wenigen Minuten, die Bewertung führt Sie Schritt für Schritt durch manuelle Tests nach WCAG AA.
Colour Contrast Analyser
Kostenloses Programm für Windows und macOS mit Pipette. Misst Kontraste überall auf dem Bildschirm, auch in Bildern und Hover-Zuständen.
Screenreader
NVDA ist kostenlos für Windows. VoiceOver ist in macOS und iOS eingebaut, TalkBack in Android. Üben Sie die Bedienung einige Minuten, bevor Sie testen.
PAC für PDFs
Der kostenlose PDF Accessibility Checker prüft PDFs nach PDF/UA und WCAG. Er zeigt auch die Lesereihenfolge und die Struktur als Vorschau.
Was kein Scanner findet
Automatische Tools prüfen, was sich im Code messen lässt. Ob etwas verständlich, sinnvoll oder bedienbar ist, können sie nicht beurteilen.
Der britische Government Digital Service hat zehn Tools an einer Testseite mit 143 eingebauten Barrieren geprüft. Alle zusammen fanden 71 Prozent, das stärkste einzelne Tool gut ein Drittel. Das W3C schreibt selbst, dass Tools nicht alle Aspekte prüfen können und menschliches Urteil nötig ist. Auch Lighthouse weist darauf hin, dass nur ein Teil der Probleme automatisch erkennbar ist.
Ein hoher Punktwert bedeutet deshalb nur, dass die messbaren Regeln erfüllt sind. Eine Seite kann 100 Punkte erreichen und trotzdem ohne Maus unbedienbar sein.
- Sinn von Alternativtexten: Das Tool sieht, dass ein Text vorhanden ist, nicht ob „Bild1.jpg“ oder eine brauchbare Beschreibung drinsteht.
- Reihenfolge und Logik: Ob die Tab-Reihenfolge der sichtbaren Reihenfolge folgt und ob Überschriften inhaltlich passen.
- Eigene Bedienelemente: Menüs, Slider, Filter und Dialoge aus Themes und Page-Buildern, die mit der Tastatur hängen bleiben.
- Verständlichkeit: Fehlermeldungen, Linktexte und Anleitungen, die nur mit Farbe oder Position arbeiten.
- Overlays: Widgets, die per Skript Barrierefreiheit versprechen, beheben diese Punkte nicht. Im Overlay Fact Sheet erklären mehr als tausend Unterzeichner, dass kein Overlay eine Website normkonform macht.
Worauf Sie in WordPress achten
Bei WordPress-Websites stammen die meisten Barrieren aus drei Quellen: Theme, Plugins und den Inhalten im Editor.
Wie Sie gefundene Fehler in WordPress konkret beheben, zeigt WordPress barrierefrei machen.
- Theme: Das Schlagwort „accessibility-ready“ im Theme-Verzeichnis heißt, dass das Theme Mindestanforderungen erfüllt, etwa Sprunglink, Tastaturbedienung und Kontraste. Über Ihre Inhalte und Ihre Anpassungen sagt es nichts.
- Page-Builder: Sie erzeugen oft verschachtelten Code, Überschriften nach Optik statt nach Gliederung und Slider ohne Pause-Taste. Prüfen Sie jedes Builder-Element einzeln mit der Tastatur.
- Plugins: Cookie-Banner, Formulare, Chat-Fenster und Pop-ups sind häufige Barrieren. Ein Banner muss per Tastatur erreichbar sein und darf den Fokus nicht verdecken, siehe Cookie-Banner einrichten.
- Editor: Alternativtexte setzen Sie in der Mediathek oder im Bild-Block. Überschriften wählen Sie nach Ebene, nicht nach Größe. Tabellen brauchen eine Kopfzeile.
- Updates: Jedes Theme- oder Plugin-Update kann eine Barriere zurückbringen. Testen Sie Tastatur und Kontraste nach größeren Updates erneut, vorzugsweise zuerst auf einer Testumgebung.
PDFs und formale Prüfung
Der Selbsttest zeigt, wo Sie stehen. Für einen belastbaren Nachweis braucht es eine vollständige Prüfung nach einem festen Verfahren.
PDFs prüfen Sie mit PAC oder mit der Barrierefreiheitsprüfung in Adobe Acrobat Pro. Beide finden fehlende Tags, Alternativtexte und Sprachangaben. Einige Punkte markieren sie nur zur manuellen Prüfung, etwa die Lesereihenfolge. Ein PDF ohne Struktur lässt sich selten nachträglich reparieren. Besser ist ein barrierefreier Export aus der Quelldatei.
Das bekannteste Verfahren in Deutschland ist der BITV-Test des BIK-Projekts mit knapp 100 Prüfschritten. Daneben gibt es einen schlankeren WCAG-Test. Geprüft wird eine Stichprobe typischer Seiten, durchgeführt von Prüfstellen im BIK-Prüfverbund. Eine kostenlose Selbstbewertung nach demselben Schema bietet bitvtest.de ebenfalls an.
Für das BFSG überwacht eine gemeinsame Marktüberwachungsstelle der Länder die Einhaltung, die MLBF. Sie nimmt auch Hinweise auf Barrieren entgegen. Wer unter das Gesetz fällt, muss außerdem Informationen zur Barrierefreiheit seines Angebots bereitstellen. Was dafür im Einzelnen gilt, klären Sie bitte mit einer Fachberatung.
Wann Sie besser Hilfe holen
Den Selbsttest schaffen Sie an einem Tag. Schwieriger ist, was danach kommt: Viele Barrieren stecken im Theme oder in Plugins und lassen sich nicht im Editor beheben.
- Menü, Slider oder Cookie-Banner lassen sich mit der Tastatur nicht bedienen.
- Ihr Angebot fällt unter das BFSG und Sie brauchen eine vollständige Prüfung aller Vorlagen.
- Nach jedem Update tauchen neue Barrieren auf, und niemand prüft sie.
Wir prüfen Ihre WordPress-Website nach WCAG, beheben die Barrieren in Theme und Plugins und halten sie bei Updates barrierefrei. Mehr dazu unter Barrierefreie Website.
Fragen zum Barrierefreiheitstest
Wie prüfe ich, ob meine Website barrierefrei ist?
Mit einem automatischen Scan und einem manuellen Selbsttest. Scannen Sie typische Seiten mit einem Tool wie WAVE und prüfen Sie dann von Hand Tastaturbedienung, Zoom, Kontraste, Struktur und Formulare. Eine verbindliche Aussage liefert nur eine vollständige Prüfung nach WCAG, etwa der BITV-Test.
Was sind die 4 Prinzipien der Barrierefreiheit?
Wahrnehmbar, bedienbar, verständlich und robust. Die WCAG ordnen alle Anforderungen diesen vier Prinzipien zu. Inhalte müssen sich sehen oder hören lassen, mit verschiedenen Eingabearten bedienbar sein, verständlich formuliert und technisch sauber umgesetzt sein.
Welche Kriterien muss eine barrierefreie Website erfüllen?
In der Regel die Erfolgskriterien der WCAG in den Stufen A und AA. Dazu gehören ausreichende Kontraste, Alternativtexte, vollständige Tastaturbedienung, sichtbarer Fokus, beschriftete Formulare und eine logische Überschriftenstruktur. Die europäische Norm EN 301 549 übernimmt diese Kriterien.
Wie kann ich ein PDF auf Barrierefreiheit prüfen?
Mit dem kostenlosen PDF Accessibility Checker (PAC) oder mit Adobe Acrobat Pro. Beide prüfen Tags, Alternativtexte, Sprache und Struktur. Die Lesereihenfolge und die Qualität der Texte müssen Sie zusätzlich von Hand kontrollieren.
Wer überprüft die Barrierefreiheit?
Für das BFSG die Marktüberwachungsstelle der Länder (MLBF). Sie überwacht die Einhaltung und nimmt Hinweise auf Barrieren entgegen. Freiwillige Prüfungen, etwa nach dem BITV-Test, führen unabhängige Prüfstellen durch.
Reicht ein Barrierefreiheits-Plugin oder Overlay?
Nein, ein Overlay macht eine Website nicht barrierefrei. Solche Widgets können fehlende Beschriftungen, Tastaturbedienung oder verständliche Fehlermeldungen nicht zuverlässig ergänzen. Die Barrieren müssen im Theme, in den Plugins und in den Inhalten selbst behoben werden.
Verwandte Themen
Kontaktformular in WordPress erstellen
Kontaktformular in WordPress erstellen: Plugin wählen, Formular einbinden, Zustellung per SMTP sichern und Spam abwehren, ohne echte Anfragen zu …
Zum RatgeberBarrierefreie Website: Pflicht, BFSG und Umsetzung
Barrierefreie Website nach dem BFSG: wer seit Juni 2025 verpflichtet ist und wie wir Ihre WordPress-Website in drei Stufen barrierefrei machen, von …
Zum RatgeberBarrierefreie Websites für eine Gemeinde
Eine Gemeinde mit vier Websites und zwei Mitarbeitern in der IT. Seit 2019 betreut HTMLHELD sie, barrierefrei und mit Online-Terminbuchung.
Zum Ratgeber