Inhaltsverzeichnis
Einfuehrung: So nutzen Sie diese Checkliste
Diese Checkliste basiert auf den Web Content Accessibility Guidelines (WCAG) 2.2 Level AA und den Anforderungen des Barrierefreiheitsstaerkungsgesetzes (BFSG). Gehen Sie jeden Punkt systematisch durch und markieren Sie den Status.
Empfohlene Vorgehensweise
- Beginnen Sie mit der automatisierten Pruefung (Tools am Ende)
- Pruefen Sie jeden Punkt manuell auf 2-3 repraesentativen Seiten
- Dokumentieren Sie gefundene Barrieren mit Screenshots
- Priorisieren Sie die Behebung nach Schweregrad
1. Wahrnehmbar (Perceivable)
Informationen und Bestandteile der Benutzeroberflaeche muessen den Nutzern so praesentiert werden, dass sie sie wahrnehmen koennen.
1.1 Textalternativen
Alle Bilder haben aussagekraeftige Alt-Texte
Dekorative Bilder haben leere Alt-Attribute (alt="")
Icons und Grafiken sind beschrieben
SVG-Icons haben aria-label oder sind mit aria-hidden versteckt
CAPTCHA-Alternativen sind vorhanden
Mindestens zwei verschiedene CAPTCHA-Typen anbieten
1.2 Zeitbasierte Medien
Videos haben Untertitel
Synchrone Untertitel fuer alle Sprachinhalte
Audiodeskription fuer Videos (wenn noetig)
Wichtige visuelle Informationen werden beschrieben
Audio-Inhalte haben Transkripte
Vollstaendige Textversion des gesprochenen Inhalts
1.3 Anpassbar
Korrekte semantische HTML-Struktur
Verwendung von header, nav, main, article, section, footer
Logische Ueberschriften-Hierarchie (h1-h6)
Keine Ebenen uebersprungen, eine h1 pro Seite
Listen korrekt ausgezeichnet
ul, ol, dl fuer Listen verwenden, nicht nur visuell formatiert
Tabellen mit korrekter Struktur
th fuer Header, scope-Attribute, caption wenn sinnvoll
1.4 Unterscheidbar
Farbkontrast mindestens 4.5:1 fuer Text
3:1 fuer grosse Schrift (18pt oder 14pt bold)
Farbe ist nicht einziges Unterscheidungsmerkmal
Zusaetzliche Indikatoren wie Icons oder Unterstreichungen
Text bis 200% vergroesserbar ohne Funktionsverlust
Kein horizontales Scrollen bei 320px Viewport-Breite
Kein Audio startet automatisch
Oder bietet Stopp/Pause/Stumm-Funktion
2. Bedienbar (Operable)
Bestandteile der Benutzeroberflaeche und Navigation muessen bedienbar sein.
2.1 Tastaturbedienbar
Alle Funktionen per Tastatur erreichbar
Tab, Enter, Space, Pfeiltasten funktionieren
Keine Tastaturfallen
Fokus kann immer weiterbewegt werden
Sichtbarer Fokus-Indikator
Deutlich erkennbar welches Element fokussiert ist
Skip-Links vorhanden
"Zum Inhalt springen" als erster Fokuspunkt
2.2 Ausreichend Zeit
Zeitlimits koennen verlaengert werden
Session-Timeouts mit Warnungen und Verlaengerungsmoeglichkeit
Automatische Aktualisierungen pausierbar
Scrollende oder blinkende Inhalte stoppen
2.3 Anfaelle und koerperliche Reaktionen
Keine blitzenden Inhalte (>3x pro Sekunde)
Kann Epilepsie-Anfaelle ausloesen
Animationen respektieren prefers-reduced-motion
Nutzer koennen Bewegungen deaktivieren
2.4 Navigierbar
Jede Seite hat einen beschreibenden Titel
Einzigartig und aussagekraeftig im title-Tag
Logische Tab-Reihenfolge
Fokus folgt visueller Lesereihenfolge
Linkzweck erkennbar
Keine "hier klicken" oder "mehr"-Links ohne Kontext
Mehrere Navigationswege vorhanden
Menu, Suche, Sitemap, Breadcrumbs
2.5 Eingabemodalitaeten (WCAG 2.1+)
Touch-Ziele mindestens 44x44px
Ausreichend grosse Klickflaechen fuer Touchscreens
Bewegungsaktivierung hat Alternative
Shake-to-undo etc. auch per Button erreichbar
3. Verstaendlich (Understandable)
Informationen und Bedienung der Benutzeroberflaeche muessen verstaendlich sein.
3.1 Lesbar
Seitensprache definiert (lang-Attribut)
lang="de" im html-Tag
Sprachwechsel gekennzeichnet
lang-Attribut bei fremdsprachigen Passagen
Abkuerzungen erklaert
Beim ersten Vorkommen ausschreiben oder abbr-Tag
3.2 Vorhersehbar
Konsistente Navigation
Gleiche Reihenfolge auf allen Seiten
Konsistente Identifikation
Gleiche Funktionen haben gleiche Bezeichnungen
Keine unerwarteten Kontextwechsel
Keine Pop-ups ohne Nutzeraktion, keine Auto-Submits
3.3 Eingabeunterstuetzung
Fehlermeldungen verstaendlich
Beschreiben Problem und Loesung
Labels und Anweisungen vorhanden
Jedes Formularfeld hat ein sichtbares Label
Fehlerkorrektur moeglich
Bei rechtlichen/finanziellen Aktionen: Pruefen, Bestaetigen, Rueckgaengig
Pflichtfelder gekennzeichnet
Visuell und programmatisch (aria-required)
4. Robust
Inhalte muessen robust genug sein, damit sie von verschiedenen Benutzeragenten und Hilfsmitteln interpretiert werden koennen.
4.1 Kompatibel
Valides HTML
Keine doppelten IDs, korrekte Verschachtelung
Name, Rolle, Wert programmatisch bestimmbar
ARIA-Attribute korrekt verwendet
Statusmeldungen fuer Screenreader
aria-live fuer dynamische Inhalte
5. Dokumentation
Neben der technischen Umsetzung erfordert das BFSG auch bestimmte Dokumentationen.
Barrierefreiheitserklaerung vorhanden
Stand der Barrierefreiheit, bekannte Einschraenkungen
Feedback-Mechanismus implementiert
Kontaktmoeglichkeit fuer Barrierefreiheits-Probleme
Erklaerung leicht auffindbar
Im Footer oder unter /barrierefreiheit/
6. Empfohlene Pruef-Tools
Nutzen Sie diese Tools fuer die automatisierte und manuelle Pruefung:
Automatisierte Tests
WAVE
Browser-Extension fuer visuelle Fehleranalyse
axe DevTools
Detaillierte technische Analyse
Lighthouse
In Chrome DevTools integriert
Pa11y
Automatisierbare CLI-Tool
Manuelle Tests
NVDA
Kostenloser Screenreader (Windows)
VoiceOver
Integriert in macOS/iOS
Colour Contrast Analyzer
Fuer Kontrast-Pruefungen
HeadingsMap
Ueberschriften-Struktur visualisieren
Fazit
Diese Checkliste deckt die wichtigsten WCAG 2.2 AA-Anforderungen ab. Arbeiten Sie sie systematisch durch und dokumentieren Sie Ihren Fortschritt. Bei komplexen Websites empfehlen wir zusaetzlich eine professionelle Pruefung.
Tipp: Regelmaessige Pruefung
Integrieren Sie Barrierefreiheitspruefungen in Ihren Entwicklungsprozess. Automatisierte Tests bei jedem Deployment und manuelle Pruefungen bei groesseren Aenderungen helfen, das Niveau zu halten.
Schlagworte
Arnold Wender
SEO-Experte & Gruender
Arnold Wender ist Gruender und Geschaeftsfuehrer der SEO-Agentur Halle (Saale). Mit ueber 18 Jahren Erfahrung in der Suchmaschinenoptimierung hilft er Unternehmen, ihre Online-Sichtbarkeit nachhaltig zu verbessern.
Profil anzeigen