Barrierefreiheit-Checkliste: 15 Punkte die Ihre Website erfüllen muss
Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) sind viele Unternehmen verpflichtet, ihre Websites barrierefrei zu gestalten. Doch was bedeutet das konkret? Die folgenden 15 Prüfpunkte basieren auf den WCAG 2.1 Level AA-Richtlinien und decken die häufigsten Barrierefreiheitsprobleme ab, die wir bei unseren Scans finden.
Wahrnehmbarkeit (Perceivable)
- 1ALT-Texte für alle Bilder
Jedes Bild benötigt einen beschreibenden ALT-Text. Dekorative Bilder erhalten ein leeres alt-Attribut (alt=""). Produktbilder sollten das Produkt benennen, nicht nur "Bild 1".
- 2Ausreichende Farbkontraste
Text muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben (3:1 für großen Text ab 18pt/14pt fett). Viele Websites scheitern an hellgrauem Text auf weißem Grund.
- 3Textvergrößerung bis 200%
Die Website muss bei einer Textvergrößerung auf 200% noch bedienbar sein. Texte dürfen nicht abgeschnitten werden oder sich überlappen.
- 4Untertitel für Videos
Alle Videos mit Sprache brauchen Untertitel. Für reine Audio-Inhalte muss eine Textaltarnative bereitgestellt werden.
Bedienbarkeit (Operable)
- 5Vollständige Tastaturbedienbarkeit
Alle interaktiven Elemente müssen per Tastatur (Tab, Enter, Escape, Pfeiltasten) erreichbar und bedienbar sein. Dropdown-Menüs, Slider und Modals sind häufige Problemstellen.
- 6Sichtbarer Tastaturfokus
Beim Navigieren mit der Tastatur muss stets erkennbar sein, welches Element gerade fokussiert ist. Entfernen Sie niemals das Standard-Focus-Styling, ohne eine Alternative bereitzustellen.
- 7Skip-Navigation
Ein "Zum Inhalt springen"-Link am Seitenanfang ermöglicht es Tastaturnutzern, die Navigation zu überspringen und direkt zum Hauptinhalt zu gelangen.
- 8Keine Zeitlimits
Nutzer müssen ausreichend Zeit haben, Inhalte zu lesen und Aktionen durchzuführen. Session-Timeouts sollten verlängerbar sein.
- 9Keine automatisch abspielenden Inhalte
Videos und Animationen sollten nicht automatisch starten. Wenn doch, muss eine Möglichkeit zum Pausieren vorhanden sein.
Verständlichkeit (Understandable)
- 10Sprachangabe im HTML
Das lang-Attribut im HTML-Tag muss die Sprache der Seite angeben (z.B. lang="de"). Screenreader verwenden diese Information für die korrekte Aussprache.
- 11Beschriftete Formularfelder
Jedes Eingabefeld braucht ein sichtbares Label-Element oder ein aria-label. Placeholder-Text allein reicht nicht aus – er verschwindet beim Tippen.
- 12Fehlermeldungen in Formularen
Bei Eingabefehlern müssen verständliche Fehlermeldungen angezeigt werden, die das Problem beschreiben und eine Korrektur ermöglichen.
Robustheit (Robust)
- 13Logische Überschriftenhierarchie
Überschriften müssen hierarchisch strukturiert sein: h1 > h2 > h3. Es darf keine Ebene übersprungen werden. Jede Seite sollte genau eine h1 haben.
- 14Semantisches HTML
Verwenden Sie HTML5-Landmark-Elemente: header, nav, main, footer, aside. Screenreader nutzen diese zur Navigation. Buttons sollten button-Elemente sein, keine gestylten divs.
- 15ARIA-Attribute korrekt einsetzen
ARIA-Rollen und -Attribute ergänzen die Semantik für komplexe Widgets. Die erste Regel von ARIA lautet: Verwenden Sie ARIA nur, wenn kein natives HTML-Element die gewünschte Semantik bietet.
Quick Wins: Die fünf häufigsten Fehler zuerst beheben
Wenn Sie nicht wissen, wo Sie anfangen sollen, konzentrieren Sie sich auf die Probleme mit der größten Reichweite. Unsere Scan-Daten zeigen, dass diese fünf Fehler auf den meisten Websites vorkomemn:
- • Fehlende ALT-Texte bei Bildern (68% der Websites)
- • Unzureichende Farbkontraste (54%)
- • Fehlende Formular-Labels (47%)
- • Kein lang-Attribut im HTML-Tag (39%)
- • Nicht-bedienbare Dropdown-Menüs per Tastatur (41%)
Barrierefreiheit automatisch prüfen
Unser Scanner testet Ihre Website auf alle 15 Prüfpunkte und zeigt konkrete Handlungsempfehlungen.
Barrierefreiheit prüfen