Barrierefreiheit prüfen - 5 Schritte zum WCAG-konformen Webshop

Sie müssen Ihre Website barrierefrei machen, wissen aber nicht, wo Sie anfangen sollen? Diese Anleitung führt Sie in 5 Schritten von der Analyse bis zur laufenden Überwachung.

Schritt 1: Automatischen Scan durchführen

Der schnellste Weg, einen Überblick zu bekommen: Lassen Sie einen automatisierten Scanner über Ihre Website laufen.

Was ein automatischer Scan findet

• Fehlende Alt-Texte bei Bildern
• Mangelnder Farbkontrast
• Fehlende Formular-Labels
• Defekte ARIA-Attribute
• Fehlende Seitenstruktur (Landmarks, Überschriften)
• Tastatur-Zugänglichkeitsprobleme

Was ein automatischer Scan NICHT findet

• Ob Alt-Texte inhaltlich sinnvoll sind
• Ob die Tab-Reihenfolge logisch ist
• Ob Screenreader-Nutzer den Inhalt verstehen
• Ob die Navigation intuitiv ist

Ein automatischer Scan deckt etwa 30-40% der WCAG-Kriterien ab. Das reicht für den Anfang - die restlichen Kriterien prüfen Sie in den weiteren Schritten.

Schritt 2: Kritische Violations zuerst beheben

Nicht alle Accessibility-Probleme sind gleich schwerwiegend. Priorisieren Sie nach Impact:

Critical - sofort beheben

Diese Probleme blockieren Nutzer komplett:

Fehlende Alt-Texte:

<!-- Vorher -->
<img src="produkt.jpg">

<!-- Nachher -->
<img src="produkt.jpg" alt="Rote Leder-Handtasche mit Goldschnalle">

Fehlende Formular-Labels:

<!-- Vorher -->
<input type="email" placeholder="E-Mail">

<!-- Nachher -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" placeholder="ihre@email.de">

Serious - zeitnah beheben

Diese Probleme erschweren die Nutzung erheblich:

Mangelnder Farbkontrast:

/* Vorher - Kontrast 2.5:1 */
.price { color: #999; }

/* Nachher - Kontrast 7:1 */
.price { color: #555; }

Buttons ohne Namen:

<!-- Vorher -->
<button><svg>...</svg></button>

<!-- Nachher -->
<button aria-label="In den Warenkorb legen"><svg>...</svg></button>

Moderate und Minor - einplanen

Diese Probleme sind weniger dringend, sollten aber nicht ignoriert werden:

• Fehlende Landmark-Regionen
• Redundante Links
• Fehlende Tabellenheader

Schritt 3: Tastatur-Test durchführen

Legen Sie die Maus weg und navigieren Sie durch Ihre gesamte Website nur mit der Tastatur:

Tasten die Sie brauchen

• Tab - Zum nächsten interaktiven Element
• Shift+Tab - Zum vorherigen Element
• Enter - Link/Button aktivieren
• Leertaste - Checkbox/Button aktivieren
• Pfeiltasten - In Menüs und Dropdowns navigieren
• Escape - Modal/Dropdown schließen

Worauf Sie achten müssen

1. Können Sie alle interaktiven Elemente erreichen? - Buttons, Links, Formularfelder, Dropdown-Menüs
2. Ist der Fokus immer sichtbar? - Sie müssen jederzeit sehen, wo Sie sich befinden
3. Gibt es Tastaturfallen? - Können Sie aus jedem Element wieder heraus?
4. Ist die Reihenfolge logisch? - Springt der Fokus nicht wild über die Seite?
5. Funktioniert der gesamte Checkout? - Vom Warenkorb bis zur Bestätigung

Schritt 4: Screenreader-Test

Testen Sie Ihre Seite mit einem Screenreader. Das klingt komplizierter als es ist:

Kostenlose Screenreader

• NVDA (Windows) - kostenlos, Open Source
• VoiceOver (Mac/iOS) - vorinstalliert (Cmd+F5)
• TalkBack (Android) - vorinstalliert

Was Sie prüfen sollten

1. Werden Bilder korrekt beschrieben?
2. Werden Formularfelder mit ihren Labels vorgelesen?
3. Werden Fehlermeldungen angekündigt?
4. Können Sie den Checkout komplett mit dem Screenreader durchführen?
5. Werden Seitenwechsel angekündigt?

Tipp für Einsteiger

Sie müssen kein Screenreader-Experte sein. Schon 30 Minuten Testen mit VoiceOver oder NVDA zeigen Ihnen die größten Probleme. Die grundlegenden Befehle sind schnell gelernt.

Schritt 5: Kontinuierliches Monitoring einrichten

Barrierefreiheit ist kein einmaliges Projekt. Jedes Update, jede neue Seite, jede Designänderung kann neue Probleme einführen.

Automatisiertes Monitoring

• Regelmäßige automatische Scans (täglich, wöchentlich)
• Regelmäßige Scans erkennen neue Violations frühzeitig
• Diff-Vergleiche zwischen Scans (was ist neu, was wurde behoben?)

CI/CD-Integration

• Accessibility-Tests bei jedem Deployment
• Build schlägt fehl bei kritischen Violations
• CI/CD-Integration in Ihre Pipeline (Pro-Plan)

Regelmäßige manuelle Checks

• Tastatur-Test nach größeren Updates
• Screenreader-Test bei neuen Features
• Quartalsweise vollständiges Audit

Zusammenfassung

Schritt	Aufwand	Abdeckung
1. Automatischer Scan	5 Minuten	30-40% der WCAG-Kriterien
2. Kritische Violations beheben	1-3 Tage	Größte Barrieren beseitigt
3. Tastatur-Test	1-2 Stunden	Navigation und Interaktion
4. Screenreader-Test	1-2 Stunden	Screenreader-Kompatibilität
5. Monitoring einrichten	30 Minuten	Dauerhafte Compliance

Fazit

Barrierefreiheit muss nicht überwältigend sein. Beginnen Sie mit dem automatischen Scan, beheben Sie die kritischsten Probleme und bauen Sie von dort aus auf. Perfektion ist nicht das Ziel - kontinuierliche Verbesserung ist es.

Starten Sie jetzt mit Schritt 1 - kostenloser automatischer Scan mit ScanClusive.