- Automatische Tools finden nur ca. 30-40% aller Barrieren – manuelle Tests sind Pflicht
- Die drei wichtigsten kostenlosen Tools: Lighthouse, WAVE, axe DevTools
- Tastaturnavigation testen ist der wichtigste manuelle Test
- Ein professionelles Audit in Deutschland kostet 2.000-8.000 €
- Ihr könnt die 80/20-Regel anwenden: Die häufigsten Fehler sind schnell behoben
Warum reicht ein automatischer Test nicht?
Automatische Tools sind ein guter Startpunkt.
Aber sie haben Grenzen.
Studien zeigen: Automatische Tests finden nur etwa 30-40% aller Barrierefreiheitsprobleme.
Was automatische Tools finden:
- Fehlende Alt-Texte bei Bildern
- Kontrast-Probleme
- Fehlende Formular-Labels
- Fehlende Dokumentensprache
Was automatische Tools NICHT finden:
- Ob ein Alt-Text sinnvoll ist (nicht nur vorhanden)
- Ob die Tab-Reihenfolge logisch ist
- Ob der Inhalt auch ohne Bilder verständlich ist
- Ob Screenreader den Content korrekt vorlesen
Das bedeutet für euch: Ein Lighthouse-Score von 100 bedeutet nicht, dass eure Website wirklich barrierefrei ist. Es bedeutet nur: Die automatisch prüfbaren Kriterien sind erfüllt. Für echte Barrierefreiheit brauchst ihr zusätzlich manuelle Tests.
Ein automatischer Test sagt euch, wo Probleme sind. Aber ob eure Website wirklich nutzbar ist, könnt nur ihr beurteilen.
Schritt 1: Automatischer Scan
Startet mit einem automatischen Scan.
In wenigen Minuten habt ihr einen Überblick über die offensichtlichsten Probleme.
Google Lighthouse
Direkt in Chrome eingebaut – kein Download nötig.
- Wo: Chrome → F12 → Reiter "Lighthouse" → Kategorie "Accessibility" auswählen → "Analyze page"
- Was es prüft: Kontraste, Alt-Texte, ARIA-Attribute, Formular-Labels
- Ergebnis: Score von 0-100 + Liste der Probleme mit Erklärungen
- Kosten: Kostenlos
WAVE (Web Accessibility Evaluation Tool)
WAVE markiert Fehler direkt auf eurer Seite.
Ihr seht sofort, wo es hakt.
- Wo: wave.webaim.org oder als Browser-Extension (Chrome/Firefox)
- Was es prüft: Strukturelle Probleme, Kontraste, Alternativtexte, ARIA-Fehler
- Besonderheit: Zeigt Fehler direkt auf der Seite an – sehr anschaulich
- Kosten: Kostenlos
axe DevTools
Wer sich im Browser-Inspector wohlfühlt, greift zu axe.
Wenige Fehlalarme, dafür genaue Treffer.
- Wo: Browser-Extension für Chrome und Firefox
- Was es prüft: Umfangreiche WCAG 2.1-Prüfung, wenige False Positives
- Besonderheit: Gruppiert Probleme nach Schweregrad, zeigt betroffene Code-Stellen
- Kosten: Basis-Version kostenlos
Das bedeutet für euch: Mit drei kostenlosen Tools (Lighthouse, WAVE, axe) bekommst ihr in 15 Minuten eine konkrete Liste von Problemen. Kein Berater-Stundensatz, kein Enterprise-Tool nötig. 15 Minuten statt 500€ Berater – gespart.
Vergleich der Tools
| Tool | Am besten für | Stärke |
|---|---|---|
| Lighthouse | Schnellen Überblick | Keine Installation nötig |
| WAVE | Visuelle Auswertung | Fehler direkt auf der Seite sichtbar |
| axe DevTools | Detaillierte Analyse | Wenige Fehlalarme, gute Erklärungen |
Empfehlung: Nutzt mindestens zwei Tools.
Jedes findet andere Probleme.
Schritt 2: Tastaturnavigation testen
Der wichtigste manuelle Test.
Viele Menschen können keine Maus benutzen – sie navigieren per Tastatur.
So testet ihr
Legt die Maus beiseite.
Navigiert eure Website nur mit der Tastatur:
| Taste | Funktion | Was ihr prüft |
|---|---|---|
| Tab | Zum nächsten Element springen | Kommt ihr zu allen Links, Buttons, Formularen? |
| Shift + Tab | Zum vorherigen Element | Funktioniert die Rückwärts-Navigation? |
| Enter | Element aktivieren | Lassen sich Links und Buttons auslösen? |
| Leertaste | Checkbox/Button aktivieren | Funktionieren Checkboxen und Dropdowns? |
| Escape | Modal/Dialog schließen | Lassen sich Overlays schließen? |
Worauf ihr achten müsst
- Fokus sichtbar? Seht ihr immer, welches Element gerade aktiv ist? (Umrandung/Markierung)
- Logische Reihenfolge? Springt der Fokus in der richtigen Reihenfolge durch die Seite?
- Keine Tastaturfallen? Bleibt ihr irgendwo "hängen" und kommt nicht mehr weiter?
- Alle Funktionen erreichbar? Dropdown-Menüs, Slider, Akkordeons – alles per Tastatur bedienbar?
outline: none). Ohne sichtbaren Fokus ist Tastaturnavigation unmöglich.
Das bedeutet für euch: Dieser Test kostet euch 10 Minuten, findet aber die kritischsten Probleme. Laut WCAG-Statistik scheitern 60% der Websites am Tastatur-Test. Wenn ihr das behebst, bist ihr schon besser als die meisten Konkurrenten.
Schritt 3: Kontraste prüfen
Zu wenig Kontrast ist eines der häufigsten Probleme.
Der WCAG 2.1 Standard fordert:
| Element | Mindest-Kontrast (Level AA) |
|---|---|
| Normaler Text | 4,5:1 |
| Großer Text (ab 18px bold oder 24px) | 3:1 |
| UI-Komponenten (Buttons, Eingabefelder) | 3:1 |
Das bedeutet für euch: Kontrast-Probleme sind die häufigste BFSG-Verletzung – und die einfachste zu beheben. Chrome DevTools zeigt euch den Kontrast direkt im Inspector an. 5 Minuten Arbeit pro Farbe, fertig.
Tools für den Kontrast-Check
- WebAIM Contrast Checker: webaim.org/resources/contrastchecker – Vordergrund- und Hintergrundfarbe eingeben
- Chrome DevTools: Element inspizieren → unter "Accessibility" wird der Kontrast angezeigt
- WAVE: Zeigt Kontrastfehler direkt auf der Seite an
Schritt 4: Inhalte prüfen
Diese Tests erfordern kein technisches Wissen.
Nur gesunden Menschenverstand:
Bilder und Alt-Texte
- Hat jedes informative Bild einen Alt-Text?
- Beschreibt der Alt-Text den Inhalt, nicht das Bild? ("Balkendiagramm: Umsatz stieg um 20%" statt "Bild eines Diagramms")
- Haben dekorative Bilder einen leeren Alt-Text (
alt="")?
Überschriften-Struktur
- Gibt es eine logische Hierarchie? (h1 → h2 → h3, keine Stufen überspringen)
- Gibt es nur eine h1 pro Seite?
- Sind Überschriften echte Überschriften-Tags (nicht nur fettgedruckter Text)?
Formulare
- Hat jedes Eingabefeld ein sichtbares Label?
- Werden Fehlermeldungen klar angezeigt?
- Ist erkennbar, welche Felder Pflichtfelder sind?
Schritt 5: Screenreader-Kurztest
Ein vollständiger Screenreader-Test ist aufwändig.
Aber einen Kurztest könnt ihr selbst machen:
- Windows: NVDA (kostenlos, nvaccess.org) oder Windows Narrator (vorinstalliert: Windows + Strg + Enter)
- Mac: VoiceOver (vorinstalliert: Cmd + F5)
- Smartphone: TalkBack (Android) oder VoiceOver (iOS)
Was ihr testen solltet:
- Werden Überschriften als Überschriften vorgelesen?
- Haben Links sprechende Bezeichnungen? ("Zum Artikel" statt "Hier klicken")
- Wird der Seiteninhalt in sinnvoller Reihenfolge vorgelesen?
Das bedeutet für euch: Ein 15-Minuten-Screenreader-Test findet Probleme, die kein automatisches Tool entdeckt. Ihr brauchst keine Spezialausbildung – einfach VoiceOver aktivieren und durchklicken.
Die häufigsten Fehler auf KMU-Websites
Diese Probleme finden sich auf fast jeder KMU-Website:
| Problem | Häufigkeit | Lösung |
|---|---|---|
| Fehlende Alt-Texte | Sehr häufig | Alt-Attribute ergänzen |
| Zu geringer Kontrast | Sehr häufig | Farben anpassen (4,5:1) |
| Fehlende Formular-Labels | Häufig | Label-Elemente mit for-Attribut hinzufügen |
| Fokus-Indikator entfernt | Häufig | outline nicht auf none setzen |
| Leere Links/Buttons | Häufig | Sprechenden Text oder aria-label ergänzen |
| Fehlende Dokumentensprache | Häufig | lang="de" im html-Tag |
Das bedeutet für euch: Diese sechs Quick Wins behebst ihr in 2-3 Stunden. Laut Branchenstudien würde ein Berater dafür 1.500-2.000€ verlangen. Mit dieser Checkliste machst ihr es selbst. 3 Stunden statt 2.000€ Berater – gespart.
Automatisch vs. manuell vs. professionelles Audit
| Automatisch | Manuell (selbst) | Professionelles Audit | |
|---|---|---|---|
| Abdeckung | 30-40% | 60-70% | 90-100% |
| Aufwand | 5-15 Minuten | 2-4 Stunden | 3-10 Tage |
| Kosten | Kostenlos | Arbeitszeit | 2.000-8.000 € |
| Empfehlung | Immer machen | Mindestens einmal | Bei E-Commerce / hohem Risiko |
Unsere Empfehlung für KMU: Startet mit automatischen Tools + Tastaturtest.
Behebt die gefundenen Probleme.
Wenn euer Online-Shop ein zentraler Umsatzkanal ist, investiert in ein professionelles Audit.
Praxis-Beispiel: Webers Online-Shop
Webers Online-Shop (15 Mitarbeiter, Mode-Accessoires) hat seine Website selbst getestet:
| Test | Ergebnis | Aufwand |
|---|---|---|
| Lighthouse Scan | Score 72 – 14 Probleme gefunden | 10 Min |
| WAVE Analyse | 23 Fehler, 8 Kontrast-Probleme | 15 Min |
| Tastaturnavigation | Checkout nicht erreichbar, Fokus unsichtbar | 30 Min |
| Alt-Text-Prüfung | 40 von 120 Produktbildern ohne Alt-Text | 45 Min |
Ergebnis: In 2 Stunden hatte Weber eine klare Prioritätenliste.
Die kritischsten Probleme (Checkout, Fokus) wurden in einer Woche behoben.
Die Alt-Texte wurden schrittweise ergänzt.
Fazit: Testen, beheben, wiederholen
Zwei Stunden reichen zum Start.
Automatische Tools laufen lassen, Tastatur in die Hand nehmen, die schlimmsten Barrieren fixen.
Dann habt ihr mehr getan als 90% eurer Wettbewerber.
- Automatische Tools nutzen – Lighthouse + WAVE als Minimum
- Tastaturnavigation testen – der wichtigste manuelle Test
- Kontraste prüfen – mindestens 4,5:1 für normalen Text
- Alt-Texte prüfen – sinnvoll, nicht nur vorhanden
- Regelmäßig testen – nach jedem relevanten Update
Perfekt muss es nicht sofort sein.
Aber dokumentiert, was ihr tut, und verbessert euch bei jedem Update.
Und nebenbei: Barrierefreiheit zu testen ist kein Hexenwerk. Mit ein bisschen Übung wird der Tastatur-Test zur Routine – und ihr erkennst Probleme schon beim Entwickeln, bevor sie live gehen. Das spart nicht nur Geld, sondern auch Stress.
Checkliste: Barrierefreiheits-Test
Mit dieser Checkliste prüft ihr die wichtigsten Barrierefreiheits-Aspekte:
- Lighthouse-Scan durchgeführt (Score notiert)
- WAVE-Analyse durchgeführt
- Tastaturnavigation getestet (Tab, Enter, Escape)
- Kontraste geprüft (4,5:1 Minimum)
- Alt-Texte aller Bilder geprüft
- Überschriften-Struktur geprüft (h1 → h2 → h3)
- Formular-Labels geprüft
- Screenreader-Kurztest durchgeführt
- Prioritätenliste erstellt
- Kritische Fehler behoben
Weiterführende Ressourcen
Hier findet ihr hilfreiche Tools und weiterführende Informationen: