Barrierefreies Webdesign: Checkliste mit 23 prüfbaren Punkten (WCAG 2.1)

Auf dieser Seite

Diese Checkliste hat 23 Punkte. Jeder Punkt lässt sich mit Ja oder Nein beantworten, und jeder nennt das Erfolgskriterium der WCAG 2.1, auf das er sich stützt. Sie ist für Designteams, Agenturen und Shopbetreiber gedacht, die vor einem Relaunch oder einer Abnahme wissen wollen, was geprüft werden muss.

Wie gelungene Umsetzungen aussehen, zeigt unser Beitrag zehn Muster, vorher und nachher. Hier geht es um die Prüfung. Die Bezeichnungen der Kriterien folgen der deutschen Übersetzung der WCAG 2.1 von Aktion Mensch e.V., die das W3C als inoffizielle Übersetzung führt.

Was gehört in eine Checkliste für barrierefreies Webdesign?

In eine brauchbare Checkliste gehören nur Punkte, die jemand mit Browser, Tastatur und einem Kontrastprüfer in wenigen Minuten bestätigen oder widerlegen kann. Jeder Punkt unten hat deshalb eine Prüfanleitung und ein Erfolgskriterium als Maßstab.

Die Spalte „Scan findet“ gibt an, ob ein automatischer Test das Kriterium wenigstens teilweise erkennen kann. „Teilweise“ heißt: Unser Scanner hat mindestens eine Regel, die zu diesem Kriterium einen Fund liefern kann. „Kaum“ heißt: Es gibt keine solche Regel, oder der Scan kann nur zur Handprüfung auffordern. Zwei Punkte, Umfluss (1.4.10) und Nicht-Text-Kontrast (1.4.11), werden nur im Audit und in der Überwachung geprüft, nicht im kostenlosen Test. Die Spalte bezieht sich auf den kostenlosen Test; wo nur das Audit etwas prüft, steht das in der Zelle. Das ist unsere Einordnung auf Grundlage der Regeln, die unser Scanner den Kriterien zuordnet, kein Teil der WCAG. Auch bei „Teilweise“ gilt: Ein Scan ohne Fund beweist nicht, dass das Kriterium erfüllt ist. Was eine Maschine nicht entscheiden kann, steht weiter unten im Abschnitt zur Aufgabenteilung.

Was prüfen Sie im Design: Farbe, Größe, Fokus?

Im Design prüfen Sie sieben Punkte: Kontrast von Text und Bedienelementen, Farbe als einziges Signal, sichtbaren Fokus, Vergrößerbarkeit, Umfluss und Textabstand. Alle sieben können Sie am fertigen Entwurf oder an der laufenden Seite messen.

Was prüfen Sie in HTML und Struktur?

In HTML und Struktur prüfen Sie acht Punkte: Alternativtexte, semantische Auszeichnung, Seitentitel, Seitensprache, Sprungmarken, aussagekräftige Überschriften, eindeutige Linktexte und Namen für alle Bedienelemente. Die meisten Fehler hier entstehen, weil etwas nur wie eine Überschrift, eine Liste oder ein Button aussieht, im Code aber ein anderes Element ist.

Was prüfen Sie bei Bedienung und Formularen?

Bei Bedienung und Formularen prüfen Sie acht Punkte: Tastaturbedienung, Tastaturfallen, Fokusreihenfolge, Beschriftungen, Fehlermeldungen, Namen, die zum sichtbaren Text passen, Autovervollständigung und Untertitel.

Der Punkt „Namen, die zum sichtbaren Text passen“ gehört zu denen, die für die Sprachsteuerung entscheidend sind. Das W3C schreibt dazu im Dokument zum Kriterium 2.5.3:

"The visual label for controls is a trigger for speech activation."

(W3C, Understanding SC 2.5.3 Label in Name, gelesen am 12.11.2026)

Wer eine Sprachsteuerung nutzt, spricht den sichtbaren Text aus. Weicht der Name im Code davon ab, scheitert der Befehl.

Was findet ein automatischer Scan, was muss ein Mensch prüfen?

Ein Scan findet Fehler, die sich am Code ablesen lassen: fehlende Alternativtexte, fehlende Feldnamen, fehlende Seitensprache, zu geringe Kontraste. Ob ein Alternativtext sinnvoll ist, ob die Fokusreihenfolge stimmt und ob man einen Warenkorb ohne Maus bedienen kann, muss ein Mensch prüfen.

Automatisierte Tests erfassen grob 30 bis 40 Prozent der WCAG-Erfolgskriterien. Den Rest muss ein Mensch prüfen. Die Tabellen oben zeigen das im Einzelnen: Bei 6 der 23 Punkte kann ein Scan kaum etwas erkennen, bei den übrigen 17 nur einen Teil, bei der Tastaturbedienung (2.1.1) zum Beispiel nur Sonderfälle. Zwei dieser 17 (1.4.10 und 1.4.11) werden nur im Audit und in der Überwachung geprüft. Ein Scan mit null Funden ist deshalb ein datierter Stand der automatisch prüfbaren Muster, keine Aussage über die Seite als Ganzes.

Der kostenlose Barrierefreiheitstest prüft die Startseite automatisiert und trennt im Bericht, was er entscheiden konnte und was offen bleibt. Das ersetzt die Handprüfung der Punkte mit „Kaum“ nicht.

Reicht diese Checkliste für das BFSG?

Nein, als alleinige Grundlage reicht sie nicht, denn sie klärt weder, ob das BFSG Ihr Angebot erfasst, noch, was dort im Einzelnen gefordert ist. Sie hilft aber bei der technischen Prüfung, die sich daran anschließt.

Das Barrierefreiheitsstärkungsgesetz (BFSG) und die zugehörige Verordnung (BFSGV) gelten in Deutschland seit dem 28.06.2025. Weder das BFSG noch die BFSGV nennen WCAG oder EN 301 549 (Stand der Gesetzestexte: 12.11.2026). In der Praxis wird gegen WCAG 2.1 Stufe AA getestet, weil EN 301 549 V3.2.1 in Kapitel 9 die Stufen A und AA der WCAG 2.1 für Webinhalte aufnimmt. Warum das so ist, steht im Beitrag Welcher Standard für Ihre Website gilt.

WCAG 2.2 fügt neun Erfolgskriterien hinzu, davon sechs auf den Stufen A und AA, und entfernt 4.1.1 (Parsing). Diese Liste folgt der Version 2.1. Wenn Sie bereits nach 2.2 prüfen: Laut W3C erfüllt eine nach 2.2 konforme Seite auch 2.1. Das Kriterium 4.1.1 (Parsing), das 2.2 entfernt hat, müssen Sie für einen Nachweis nach 2.1 aber gegebenenfalls weiter prüfen.

Das BFSG gilt unter anderem für Dienstleistungen im elektronischen Geschäftsverkehr, die nach dem 28. Juni 2025 für Verbraucher erbracht werden (§ 1 Abs. 3 Nr. 5 BFSG). Für Kleinstunternehmen, die Dienstleistungen anbieten oder erbringen, gilt die Pflicht aus § 3 Abs. 1 nicht (§ 3 Abs. 3 BFSG); Kleinstunternehmen sind Unternehmen mit weniger als zehn Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme (§ 2 Nr. 17 BFSG). Bei Angeboten über Landesgrenzen hinweg fragen Sie eine Juristin oder einen Juristen. Einen ersten technischen Überblick gibt die Seite BFSG prüfen.

In welcher Reihenfolge arbeiten Sie die Liste ab?

Beginnen Sie mit den Punkten, die den Kaufabschluss oder die Kontaktaufnahme blockieren, und arbeiten Sie sich danach zu den Gestaltungsdetails vor. Ein Formular ohne Beschriftung oder ein Bestellvorgang, der sich mit der Tastatur nicht bedienen lässt, blockiert Betroffene vollständig, ein knapp verfehlter Kontrast in der Fußzeile nicht.

1. Bestellweg oder Kontaktformular mit der Tastatur durchgehen. Das berührt 2.1.1, 2.1.2, 2.4.3, 3.3.1 und 3.3.2.
2. Namen und Rollen aller Bedienelemente kontrollieren. Das betrifft 4.1.2 und 2.5.3, besonders bei Icon-Buttons.
3. Kontraste und Fokus messen. Das sind 1.4.3, 1.4.11 und 2.4.7, meist im Stylesheet an wenigen Stellen zu beheben.
4. Vorlagen prüfen. Titel, Sprache, Sprungmarke und Überschriftenstruktur stecken in den Vorlagen. Eine Korrektur dort wirkt auf allen Seiten.
5. Datiert festhalten. Notieren Sie das Datum und den geprüften Seitenumfang, damit ein späterer Stand vergleichbar ist.

Wir aktualisieren diese Liste, wenn sich die Grundlage ändert. Rechtliche Angaben sind aus Primärquellen übernommen, datiert und vereinfacht. Prüfen Sie den aktuellen Stand, bevor Sie handeln.

Verwandter Artikel: Barrierefreie Website Beispiele: zehn Muster, vorher und nachher

Dieser Artikel dient der Orientierung und stellt keine Rechtsberatung dar.