Table of Contents
Checkliste barrierefreie Webseitengestaltung
Grundlage ist WCAG 2.1 Checkliste mit dem Level AA
https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1¤tsidebar=%23col_customize&levels=aaa
Text(e) / Inhalt(e)
| erledigt | Prüfpunkte |
|---|---|
| Inhalte auf den Punkt gebracht | |
| Einheitliche Benennung ein und desselben Sachverhaltes | |
| Zwischenüberschriften bei längeren Texten/Anleitungen zur besseren Gliederung und besseren inhaltlichen Aufnahme durch die Lesenden | |
| Webseiten mit einem Text-Browser “ansehen” und überprüfen, z. B. Links | |
| Was passiert bei “Klick” auf Schaltfläche/Link → z. B. File Download, öffnet externe Webseite, öffnet Dokument / Formular | |
| Webseiten mittels eines Screen-Readers, z. B. enthalten im Betriebssystem oder frei verfügbar, vorlesen lassen | |
| Mehrsprachigkeit (deutsch/englisch) |
Bild(er)
| erledigt | Prüfpunkte |
|---|---|
| Bild(er) mit alternativ-Text versehen, wenn für Inhalt/Text relevant | |
| Bild(er) mit Beschreibungen versehen (z. B. Stichworte, was auf dem Bild zu sehen ist, keine Interpretation(!)) | |
| Auflösung muss 200-fachen Zoom aushalten ohne zu verpixeln |
Design
| erledigt | Prüfpunkte |
|---|---|
| Textsatz: Links-bündig und kein Blocksatz | |
| Prüfung von Farbkontrasten (z. B. Hintergrundfarbe zu Schriftfarbe → hoher Kontrast) | |
| Prüfung von Farbschemata (z.B. bei Rot-Grün-Sehschwäche → z.B. möglichst geringe Rot-/Grün-Farbwerte, Symbole zur Unterstützung nutzen) | |
| Schriftgröße: 12+ | |
| Schaltflächengröße: <…. | |
| Ausreichend große Abstände zwischen einzelnen Schaltflächen | |
| Intuitiv, übersichtlich und klar gestaltetes Layout |
Überprüfungswerkzeuge
Eine Liste mit Überprüfungswerkzeugen von Webseiten nach WCAG 2.x findet sich hier: https://www.w3.org/WAI/test-evaluate/tools/list/