Häufige Fehler beheben
Die 10 Fund-Arten, die Barrierewerk automatisch prüft – mit der jeweiligen Lösung.
Bilder ohne alt-Text
Screenreader-Nutzer bekommen entweder nichts oder nur den Dateinamen vorgelesen.
Jedem <img> ein alt-Attribut geben (kurze Beschreibung). Rein dekorative Bilder: alt="".
Formularfelder ohne Beschriftung
Eingabefelder ohne <label> sind für Screenreader nicht verständlich.
Jedes Feld mit <label for="id"> verknüpfen oder aria-label setzen. Placeholder allein reicht nicht.
Zu geringer Textkontrast
Text ist für sehbehinderte Nutzer schwer lesbar.
Mind. 4,5:1 Kontrast (3:1 bei großer Schrift). Vorher mit einem Kontrast-Rechner prüfen.
Fehlende Sprache der Seite
Screenreader wissen nicht, in welcher Sprache vorgelesen werden soll.
<html lang="de"> setzen (bei WordPress: Einstellungen → Allgemein).
Icon-Buttons ohne Text
Der Zweck von Buttons mit nur einem Icon bleibt unklar.
aria-label an den Button, z. B. aria-label="Warenkorb öffnen".
Chaotische Überschriften-Struktur
Erschwert Orientierung für Screenreader-Nutzer.
Genau eine h1 pro Seite, danach Ebenen nicht überspringen (h2 → h3, nicht h2 → h4).
Fokus bei Tastaturnavigation unsichtbar
Sticky-Header können den Fokusrahmen verdecken.
Sichtbaren :focus-Stil setzen und scroll-margin-top bei fixierten Headern nutzen.
Drag-and-Drop ohne Alternative
Wer nicht präzise ziehen kann, ist ausgeschlossen.
Buttons als Alternative zum Ziehen anbieten (z. B. Pfeile zum Sortieren).
Captcha ohne Alternative
Kann Nutzer mit kognitiven Einschränkungen aussperren.
Alternative wie E-Mail-Link oder SMS-Code zusätzlich anbieten.
Adresse doppelt eingeben müssen
Ohne Autofill-Unterstützung mühsam und fehleranfällig.
autocomplete-Attribute setzen und Checkbox "Rechnungsadresse = Lieferadresse" anbieten.