TL;DR: Mit dieser 15-Punkte-Checkliste findest du in 30 Minuten die häufigsten Barrierefreiheits-Probleme deiner Website. Jeder Punkt enthält: was du prüfen musst, wie du es fixst und welches Tool dir hilft.
Warum eine Checkliste?
Barrierefreiheit wirkt auf den ersten Blick überwältigend. WCAG 2.1 hat 78 Erfolgskriterien, WCAG 2.2 kommen noch 6 dazu. Aber die Realität ist: 80% aller Barrierefreiheits-Probleme fallen in dieselben 15 Kategorien. Wenn du diese 15 Punkte abarbeitest, hast du den Großteil der Probleme gefunden.
Nimm dir 30 Minuten, öffne deine Website und geh die Liste durch. Für jeden Punkt brauchst du maximal 2-3 Minuten.
Die 15-Punkte-Checkliste
1. Alt-Texte für Bilder ✅
Prüfe: Hat jedes informative Bild einen beschreibenden Alt-Text? Dekorative Bilder haben alt="".
Tool: WAVE Browser Extension — markiert Bilder ohne Alt-Text rot.
Fix: Beschreibe, was das Bild zeigt, nicht wie es aussieht. "Team bei der Projektbesprechung im Büro" statt "Foto IMG_4523".
2. Farbkontrast ✅
Prüfe: Mindestens 4.5:1 für normalen Text, 3:1 für großen Text (ab 18px bold oder 24px regular).
Tool: WebAIM Contrast Checker oder Chrome DevTools (Inspect → Accessibility).
Fix: Text abdunkeln oder Hintergrund aufhellen. Grauer Text auf weißem Grund ist der häufigste Fehler.
3. Tastaturbedienung ✅
Prüfe: Kannst du per Tab durch alle interaktiven Elemente navigieren? Funktioniert Enter/Space zum Aktivieren?
Tool: Kein Tool nötig — Tab drücken und testen.
Fix: Verwende native HTML-Elemente (<button>, <a>) statt gestylter <div>s.
4. Fokus-Indikator ✅
Prüfe: Siehst du beim Tabben immer, welches Element gerade fokussiert ist?
Tool: Tab durch die Seite und schauen.
Fix: Nie outline: none ohne Alternative setzen. CSS: :focus-visible { outline: 2px solid #EDFE5B; }
5. Heading-Hierarchie ✅
Prüfe: Gibt es genau ein H1? Folgen H2, H3 etc. in logischer Reihenfolge ohne Sprünge?
Tool: HeadingsMap Browser Extension oder WAVE.
Fix: Headings nach Inhalt strukturieren, nicht nach Optik. Für Styling CSS nutzen, nicht Heading-Level ändern.
6. Link-Texte ✅
Prüfe: Sind Link-Texte beschreibend? "Jetzt anfragen" ist besser als "Hier klicken".
Tool: WAVE markiert generische Link-Texte.
Fix: Link-Text soll auch ohne Kontext verständlich sein. Screenreader-Nutzer navigieren oft per Link-Liste.
7. Formulare ✅
Prüfe: Hat jedes Input-Feld ein sichtbares Label? Werden Fehler verständlich angezeigt?
Tool: axe DevTools findet fehlende Labels automatisch.
Fix: <label for="email">E-Mail</label><input id="email">. Placeholder ist kein Label-Ersatz.
8. Sprachattribut ✅
Prüfe: Hat das <html>-Tag ein lang-Attribut? Für deutsch: lang="de"
Tool: Rechtsklick → Seitenquelltext → erste Zeile prüfen.
Fix: In Next.js: <html lang="de"> im Root Layout.
9. Responsive/Zoom ✅
Prüfe: Ist die Seite bei 200% Browser-Zoom noch nutzbar? Kein horizontales Scrollen?
Tool: Strg/Cmd + drücken bis 200%.
Fix: Relative Einheiten (rem, em, %) statt feste Pixel für Schrift und Layout.
10. Video-Untertitel ✅
Prüfe: Haben eingebettete Videos Untertitel oder eine Transkription?
Tool: Manuell prüfen — abspielen und schauen.
Fix: YouTube generiert automatische Untertitel — diese aber prüfen und korrigieren.
11. Touch-Target-Größe ✅
Prüfe: Sind Buttons und Links mindestens 24×24px groß? Ideal: 44×44px für mobile.
Tool: Chrome DevTools → Element inspizieren → Computed Styles.
Fix: min-height: 44px; min-width: 44px; für alle Touch-Targets.
12. Skip Navigation ✅
Prüfe: Gibt es einen "Zum Inhalt springen"-Link am Anfang der Seite?
Tool: Tab drücken — der erste fokussierbare Link sollte der Skip-Link sein.
Fix: <a href="#main" class="sr-only focus:not-sr-only">Zum Inhalt springen</a>
13. Bewegte Inhalte ✅
Prüfe: Können Animationen, Karussells und Auto-Play-Videos pausiert werden?
Tool: Manuell prüfen.
Fix: Pause-Button für alle automatisch bewegten Inhalte. CSS: @media (prefers-reduced-motion: reduce) respektieren.
14. Tabellen ✅
Prüfe: Haben Datentabellen <th>-Elemente und scope-Attribute?
Tool: axe DevTools oder WAVE.
Fix: <th scope="col"> für Spaltenheader, <th scope="row"> für Zeilenheader.
15. ARIA richtig einsetzen ✅
Prüfe: Werden ARIA-Attribute nur dort eingesetzt, wo native HTML nicht reicht? Keine redundanten Rollen?
Tool: axe DevTools findet fehlerhafte ARIA-Nutzung.
Fix: Erste Regel: Kein ARIA ist besser als schlechtes ARIA. Verwende native HTML-Elemente wo möglich.
Fazit
Diese 15 Punkte decken die häufigsten Barrierefreiheits-Probleme ab. Wenn du alle abhakst, bist du auf einem guten Weg zu WCAG 2.1 Level AA.
Für ein umfassendes Audit, das auch Screenreader-Tests und kognitive Zugänglichkeit abdeckt, kontaktiere uns. Bei r.digital bauen wir Websites, die von Anfang an barrierefrei sind.
Häufige Fragen
Wie lange dauert ein vollständiges Accessibility-Audit?
Für eine typische KMU-Website (10-30 Seiten) rechne mit 2-3 Tagen professionellem Audit. Diese Checkliste ist ein Quick-Check — nicht der Ersatz für ein vollständiges Audit.
Welches Tool ist das wichtigste?
Wenn du nur ein Tool installieren willst: axe DevTools Chrome Extension. Es findet automatisch ca. 57% aller WCAG-Probleme und gibt klare Handlungsempfehlungen.
Muss ich alle 15 Punkte auf einmal fixen?
Nein. Priorisiere nach Impact: Alt-Texte, Kontrast und Tastaturbedienung zuerst. Diese drei allein betreffen die meisten Nutzer mit Einschränkungen.
