Barrierefreiheit Website: Checkliste mit 12 Punkten

Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der international anerkannte Standard für barrierefreie Webinhalte. Sie kennen drei Konformitätsstufen: A, AA und AAA. Maßgeblich ist in Europa die Stufe AA – über die Norm EN 301 549 ist sie auch der Bezugspunkt für das deutsche Barrierefreiheitsstärkungsgesetz, das seit dem 28. Juni 2025 gilt.

Die WCAG gliedern sich in vier Prinzipien: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Die folgenden zwölf Punkte sind daraus die, die in Prüfungen am häufigsten auffallen – nicht die vollständige Norm, aber der Teil mit dem größten Hebel.

1. Farbkontrast bei Text: Normaler Text braucht mindestens 4,5:1 zum Hintergrund, großer Text (ab 18,66 px fett oder 24 px) mindestens 3:1. Hellgraue Schrift auf Weiß ist der mit Abstand häufigste Verstoß.
2. Farbkontrast bei Bedienelementen: Ränder von Eingabefeldern, Icons und Schaltflächen brauchen mindestens 3:1 – sonst ist nicht erkennbar, wo man klicken kann.
3. Farbe als alleiniger Bedeutungsträger: Ein rot markiertes Pflichtfeld ist für farbenblinde Nutzer unsichtbar. Es braucht zusätzlich ein Symbol oder Text.
4. Alternativtexte: Jedes informationstragende Bild braucht eine Beschreibung im alt-Attribut. Rein dekorative Bilder bekommen ein leeres alt="" – dann überspringt der Screenreader sie, statt den Dateinamen vorzulesen.
5. Überschriftenhierarchie: Genau eine H1 pro Seite, darunter H2, darunter H3 – ohne Ebenen zu überspringen. Überschriften dürfen nicht als reine Schriftvergrößerung missbraucht werden.
6. Formularbeschriftungen: Jedes Eingabefeld braucht ein verknüpftes label-Element. Ein Platzhaltertext genügt nicht, weil er beim Tippen verschwindet.
7. Fehlermeldungen: Sie müssen benennen, welches Feld betroffen ist und was zu tun ist. „Eingabe ungültig" erfüllt das nicht.
8. Tastaturbedienung: Jede Funktion muss ohne Maus erreichbar sein. Menüs, die nur auf Hover reagieren, und Elemente, die per Tastatur nicht ansteuerbar sind, fallen durch.
9. Sichtbarer Fokus: Es muss jederzeit erkennbar sein, wo der Tastaturfokus steht. Das verbreitete outline: none im CSS entfernt genau diese Anzeige.
10. Logische Fokusreihenfolge: Beim Durchtabben muss die Reihenfolge dem visuellen Aufbau folgen. Positionierung per CSS kann sie unbemerkt durcheinanderbringen.
11. Sprachauszeichnung: Das html-Element braucht lang="de". Ohne diese Angabe liest ein Screenreader deutschen Text mit englischer Aussprache vor.
12. Verständliche Linktexte: „Hier klicken" oder „mehr" sagen ohne Kontext nichts. Screenreader-Nutzer lassen sich häufig nur die Linkliste ausgeben – dort muss jeder Eintrag für sich verständlich sein.

Von diesen zwölf Punkten sind etwa die Hälfte maschinell zuverlässig messbar: Kontrastwerte, fehlende Alternativtexte, fehlende Labels, Überschriftenstruktur, Sprachauszeichnung, fehlender Fokusindikator. Ein automatischer Test findet sie in Sekunden.

Die andere Hälfte braucht ein menschliches Urteil. Ob ein Alternativtext das Bild sinnvoll beschreibt, ob die Fokusreihenfolge logisch ist, ob eine Fehlermeldung wirklich weiterhilft – das kann Software nicht bewerten. Untersuchungen gehen davon aus, dass automatisierte Tests rund ein Drittel bis die Hälfte aller Barrieren erfassen.

Praktisch heißt das: Der automatische Test ist der richtige erste Schritt, weil er die schnell behebbaren Fehler zutage fördert. Wer Konformität nachweisen muss, ergänzt ihn um eine manuelle Prüfung.

Beginnen Sie mit den Kontrasten. Sie betreffen meist die gesamte Website auf einen Schlag, sind zentral im Stylesheet zu beheben und wirken sofort für alle Seiten.

Danach folgen Formulare und Fokusindikator – das sind die Punkte, an denen Nutzer konkret hängenbleiben und abspringen. Alternativtexte und Überschriftenstruktur sind Fleißarbeit pro Seite und lassen sich gut nach und nach abarbeiten.