Barrierefreiheit der Website prüfen: die Anleitung zum Selbsttest

Was dieser Selbsttest leistet — und was nicht

In etwa 30 Minuten bekommst du eine belastbare Antwort auf die Frage: Ist meine Website ungefähr in Ordnung, oder liegt hier größerer Handlungsbedarf? Das reicht für die Entscheidung, ob und wie dringend du das Thema angehen musst.

Was dieser Test nicht leistet: einen Nachweis der Konformität. Für die Barrierefreiheitserklärung oder als Reaktion auf eine Abmahnung braucht es eine vollständige Prüfung gegen alle rund 50 Kriterien der WCAG 2.1 AA. Der Selbsttest ist die Vorstufe, nicht der Ersatz.

Ob du überhaupt verpflichtet bist, klärt der Beitrag zur BFSG-Pflicht. Diese Anleitung setzt voraus, dass du diese Frage bereits mit Ja beantwortet hast — oder es einfach wissen willst.

Teil 1: Die automatisierten Tests (10 Minuten)

Drei Werkzeuge, alle kostenlos, alle direkt im Browser. Führe sie auf deiner Startseite aus — und danach unbedingt auf einer Formular- oder Buchungsseite, weil dort die schwerwiegenderen Probleme sitzen.

Lighthouse (bereits in Chrome eingebaut)

Rechtsklick auf die Seite, Untersuchen, Reiter Lighthouse, nur die Kategorie Accessibility auswählen, dann Analyse starten. Nach etwa 30 Sekunden bekommst du einen Score von 0 bis 100 und eine Liste der verletzten Regeln.

Einordnung der Werte: Unter 70 liegt strukturell einiges im Argen. Zwischen 70 und 90 sind es meist einzelne, gut behebbare Punkte. Über 90 heißt: Die automatisch prüfbaren Kriterien sind weitgehend erfüllt — die eigentliche Prüfung beginnt jetzt erst, in Teil 2.

WAVE (Browser-Erweiterung von WebAIM)

WAVE markiert Fehler direkt auf der Seite mit Symbolen. Der große Vorteil gegenüber Lighthouse: Du siehst sofort, wo das Problem sitzt, nicht nur dass es existiert. Achte auf die rote Kategorie Errors — das sind eindeutige Verstöße. Die orangefarbenen Alerts sind Hinweise, die manuell bewertet werden müssen.

Besonders nützlich ist die Ansicht der Überschriften-Struktur. Sie zeigt auf einen Blick, ob deine Seite eine logische Gliederung hat oder ob H-Ebenen übersprungen werden.

axe DevTools (Browser-Erweiterung von Deque)

Die präziseste der drei kostenlosen Optionen, mit den wenigsten Fehlalarmen. Findet sich nach Installation als eigener Reiter in den Entwicklertools. Liefert zu jedem Fund eine Erklärung, welches WCAG-Kriterium betroffen ist und wie sich der Fehler beheben lässt — hilfreich, wenn du die Ergebnisse an jemanden weitergeben willst.

Teil 2: Die manuellen Tests (20 Minuten)

Hier finden sich die Probleme, die tatsächlich dazu führen, dass jemand deine Website nicht benutzen kann. Drei Tests, keine Vorkenntnisse nötig.

Test 1: Die komplette Seite nur mit der Tastatur bedienen

Der wichtigste Test überhaupt. Klicke einmal in die Adressleiste des Browsers, dann fasse die Maus nicht mehr an. Navigiere ausschließlich mit Tab (vorwärts), Shift+Tab (rückwärts), Enter (aktivieren), Leertaste (Checkboxen, Scrollen) und den Pfeiltasten (innerhalb von Menüs und Auswahllisten).

Prüfe dabei vier Dinge:

1. Ist immer sichtbar, wo du gerade bist? Jedes fokussierte Element braucht eine deutlich erkennbare Markierung. Wenn der Fokus unsichtbar ist, ist die Seite für Tastatur-Nutzer praktisch unbedienbar. Das ist der mit Abstand häufigste schwere Verstoß.
2. Ist die Reihenfolge logisch? Der Fokus sollte der visuellen Leserichtung folgen. Springt er von oben nach unten und wieder zurück, stimmt die Struktur im Code nicht.
3. Erreichst du wirklich alles? Aufklappmenüs, Cookie-Banner, Modals, Bildergalerien, Slider, Akkordeons. Ein häufiger Fall: Das Hauptmenü lässt sich per Maus aufklappen, per Tastatur aber nicht.
4. Kommst du wieder heraus? Öffne ein Modal oder Overlay und versuche, es mit der Tastatur zu schließen — idealerweise mit Escape. Wenn der Fokus darin gefangen bleibt, ist die Seite ab dort blockiert.

Wenn du bei diesem Test hängen bleibst, hast du das wichtigste Ergebnis dieses Selbsttests bereits.

Test 2: Auf 200 Prozent zoomen

Drücke Strg + Plus (Mac: Cmd + Plus), bis die Seite auf 200 Prozent vergrößert ist. WCAG verlangt, dass Inhalte bis zu dieser Stufe ohne Informationsverlust nutzbar bleiben.

Worauf zu achten ist: Überlappen sich Texte? Verschwindet Inhalt hinter anderen Elementen? Entsteht horizontales Scrollen? Bleibt die Navigation erreichbar? Sind Buttons noch vollständig sichtbar und klickbar?

Dieser Test deckt oft Layout-Probleme auf, die auch mobil auftreten — er lohnt sich also doppelt.

Test 3: Kontraste der kritischen Elemente messen

Nimm den WebAIM Contrast Checker und prüfe die Kombinationen, die auf deiner Seite am häufigsten vorkommen. Die Mindestwerte nach WCAG 2.1 AA:

• 4,5:1 für normalen Fließtext
• 3:1 für große Schrift (ab 18 pt bzw. 14 pt fett)
• 3:1 für Bedienelemente, Icons und Formularrahmen

Die typischen Problemstellen sind fast immer dieselben: hellgrauer Text auf weißem Grund, Platzhaltertexte in Formularfeldern, Buttons in der Markenfarbe mit weißer Schrift, Text über Hintergrundbildern und deaktivierte Zustände von Bedienelementen.

Optional: der Screenreader-Test (10 Minuten)

Nicht zwingend nötig für eine erste Einschätzung, aber sehr aufschlussreich. Auf dem Mac startest du VoiceOver mit Cmd+F5, unter Windows die Sprachausgabe mit Windows+Strg+Enter. Alternativ ist NVDA für Windows kostenlos verfügbar.

Achte auf drei Dinge: Ergibt die Überschriften-Gliederung vorgelesen einen Sinn? Werden Formularfelder korrekt benannt oder nur als „Eingabefeld“ angesagt? Werden Bilder mit einem beschreibenden Text vorgelesen oder mit dem Dateinamen?

Ein Hinweis: Die Bedienung eines Screenreaders will geübt sein. Wenn du im ersten Versuch nicht zurechtkommst, sagt das nichts über deine Website aus. Beschränke dich auf die drei genannten Punkte.

Die Ergebnisse einordnen

Aus den Tests ergibt sich in aller Regel eines von drei Bildern:

• Wenige Einzelpunkte. Lighthouse über 90, Tastatur-Navigation funktioniert, ein paar Kontraste liegen knapp unter Norm, die Barrierefreiheitserklärung fehlt. Realistischer Aufwand: überschaubar, meist im niedrigen vierstelligen Bereich, teils in Eigenleistung machbar.
• Strukturelle Lücken. Fokus nicht sichtbar, Menü per Tastatur nicht erreichbar, Formular-Labels fehlen, Überschriften-Ebenen springen. Das sind Eingriffe im Code, nicht im Design. Aufwand typisch 1.500 bis 4.000 Euro.
• Grundlegende Probleme. Layout bricht beim Zoomen, Buchungsstrecke per Tastatur unbedienbar, durchgängig zu kontrastarmes Farbschema. Hier lohnt es sich zu rechnen, ob Nachrüsten oder Neubau günstiger ist — bei Websites, die vor 2018 gebaut wurden, ist es oft der Neubau.

Was mit Overlay-Tools ist

Wenn du bei der Recherche auf Anbieter stößt, die vollständige Barrierefreiheit per eingebundenem Skript versprechen: Diese Overlays lösen nur einen kleinen Teil der Anforderungen — im Wesentlichen Kontrast-Umschaltung und Schriftgrößen-Anpassung. Die strukturellen Kriterien aus Test 1 bleiben unberührt, weil sie im Code der Seite selbst liegen.

Hinzu kommt, dass Screenreader-Nutzer Overlays häufig als zusätzliche Barriere beschreiben, weil sie mit den ohnehin installierten Hilfsmitteln kollidieren. Für BFSG-Konformität sind sie nicht ausreichend. Das ist kein Randthema — es ist der häufigste teure Umweg bei diesem Thema.

Wenn du es nicht selbst machen willst

Der Selbsttest sagt dir, ob Handlungsbedarf besteht. Für die vollständige Prüfung gegen alle WCAG-2.1-AA-Kriterien, die Dokumentation und die Barrierefreiheitserklärung übernehmen wir das: Der BFSG-Check startet bei 490 € und liefert einen Mängelbericht mit Priorisierung nach Abmahn-Risiko und einer Aufwandsschätzung je Punkt. Die Umsetzung startet bei 1.490 €.

Welche Kriterien dabei im Einzelnen geprüft werden, steht in der BFSG-Checkliste. Wenn du unsicher bist, ob dein Unternehmen überhaupt betroffen ist, klärt das der Beitrag zur BFSG-Pflicht. Und wenn du direkt eine Einschätzung zu deinem konkreten Fall willst: 30 Minuten Erstgespräch, kostenlos.