ADA-Checkliste für Websites

Eine offizielle ADA-Checkliste für Websites gibt es nicht. Die Leitlinien des US-Justizministeriums (DOJ) zur Barrierefreiheit im Web verweisen auf bestehende technische Standards – die WCAG und die Section-508-Standards – und nennen typische Barrieren: schlechter Farbkontrast, Bilder ohne Alternativtext, Videos ohne Untertitel, nicht barrierefreie Formulare und Navigation nur mit der Maus. Diese Checkliste übersetzt WCAG 2.2 Stufe AA in praktische Prüfpunkte, nach Bereichen geordnet, für eine Unternehmenswebsite oder einen Online-Shop. Das ist eine allgemeine Information, keine Rechtsberatung, und das Abarbeiten der Liste bescheinigt nichts.

Laden Sie die Checkliste unten als PDF herunter.

So nutzen Sie diese Checkliste

1. Wählen Sie die wichtigen Seiten aus: Startseite, eine Kategorie- oder Kollektionsseite, eine Produkt- oder Leistungsseite, Warenkorb, Checkout, Kundenkonto, Kontaktformular und eine lange Inhaltsseite.
2. Starten Sie mit einem automatischen Scan. Unser kostenloser ADA Compliance Checker findet viele Fehler im Code in etwa einer Minute; die unten mit (auto) markierten Punkte deckt er teilweise ab.
3. Arbeiten Sie die manuellen Punkte ab – mit Tastatur, Screenreader und Browser-Zoom.
4. Schreiben Sie auf, was Sie gefunden und behoben haben, mit Datum. Diese Dokumentation ist in jedem Fall nützlich.

Die Kriteriennummern in Klammern beziehen sich auf WCAG 2.2.

Bilder und Grafiken

• [ ] Jedes informative Bild hat eine Textalternative (auto: Vorhandensein), die seinen Inhalt oder Zweck beschreibt (1.1.1).
• [ ] Dekorative Bilder haben einen leeren Alternativtext, damit Screenreader sie überspringen (1.1.1).
• [ ] Bildlinks und Icon-Buttons sagen, wohin sie führen oder was sie tun – „Warenkorb“, nicht „Icon“ (1.1.1, 2.4.4) (auto).
• [ ] Text wird nicht als Bild dargestellt, außer in Logos (1.4.5).
• [ ] Diagramme und Infografiken haben eine Textzusammenfassung in der Nähe (1.1.1).

Farbe und Kontrast

• [ ] Fließtext hat einen Kontrast von mindestens 4,5:1, großer Text 3:1 (1.4.3) (auto). Farbpaare prüfen Sie mit dem Kontrastrechner.
• [ ] Icons, Feldrahmen und Fokusanzeigen haben mindestens 3:1 gegenüber ihrem Hintergrund (1.4.11).
• [ ] Farbe ist nie der einzige Weg, eine Information zu zeigen, etwa Pflichtfelder, Fehler oder reduzierte Preise (1.4.1).

Tastatur und Fokus

• [ ] Jeder Link, jeder Button, jedes Menü, jeder Slider und jedes Formularfeld funktioniert mit Tab, Umschalt+Tab, Enter, Leertaste und Pfeiltasten (2.1.1).
• [ ] Sie bleiben nie in einem Pop-up, Chat-Widget oder Videoplayer hängen (2.1.2).
• [ ] Der Fokus ist immer sichtbar (2.4.7) und wird nicht von Sticky Headern oder Cookie-Bannern verdeckt (2.4.11).
• [ ] Die Fokus-Reihenfolge folgt der visuellen Reihenfolge (2.4.3).
• [ ] Ein Link „Zum Inhalt springen“ oder Landmarks erlauben es, die Navigation zu überspringen (2.4.1).

Formulare und Checkout

• [ ] Jedes Feld hat ein sichtbares Label, das im Code mit ihm verknüpft ist (1.3.1, 3.3.2, 4.1.2) (auto: Verknüpfung).
• [ ] Adress-, E-Mail- und Zahlungsfelder nutzen autocomplete-Attribute (1.3.5) (auto: gültige Werte).
• [ ] Fehler werden in Textform beschrieben, direkt am Feld, mit einem Hinweis, wie man sie behebt (3.3.1, 3.3.3).
• [ ] Bestellungen und Zahlungen lassen sich prüfen und korrigieren, bevor sie endgültig sind (3.3.4).
• [ ] Die Anmeldung verlangt nicht, ein Rätsel zu lösen oder sich einen Code zu merken, ohne Alternative wie Einfügen oder einen Passwortmanager (3.3.8).
• [ ] Bereits eingegebene Informationen werden im selben Ablauf nicht erneut abgefragt (3.3.7).

Struktur und Navigation

• [ ] Jede Seite hat einen eindeutigen, aussagekräftigen Titel (2.4.2) (auto: Vorhandensein).
• [ ] Überschriften bilden eine logische Gliederung, und Listen und Tabellen nutzen echtes Markup (1.3.1, 2.4.6).
• [ ] Die Sprache der Seite ist angegeben (3.1.1) (auto).
• [ ] Navigation und Hilfe-Links stehen auf jeder Seite an derselben Stelle (3.2.3, 3.2.6).
• [ ] Es gibt mehr als einen Weg zu einer Seite, etwa Menü, Suche oder Sitemap (2.4.5).
• [ ] Linktexte sind im Kontext verständlich – kein bloßes „hier klicken“ (2.4.4).

Layout, Zoom und Mobilgeräte

• [ ] Bei 200 % Zoom wird kein Text abgeschnitten (1.4.4); bei 400 % oder 320 Pixeln Breite muss nichts horizontal gescrollt werden (1.4.10).
• [ ] Die Website funktioniert im Hoch- und im Querformat (1.3.4).
• [ ] Buttons und Links sind mindestens 24 × 24 CSS-Pixel groß oder haben genug Abstand (2.5.8) (auto).
• [ ] Alles, was durch Ziehen funktioniert, etwa ein Preisfilter-Slider, geht auch mit einfachem Tippen oder Klicken (2.5.7).
• [ ] Inhalte, die bei Hover oder Fokus erscheinen, lassen sich schließen und bleiben sichtbar, solange der Zeiger darüber ist (1.4.13).

Video, Audio und Bewegung

• [ ] Aufgezeichnete Videos haben genaue Untertitel (1.2.2) und Audiodeskription oder ein Transkript (1.2.3, 1.2.5).
• [ ] Nichts spielt automatisch länger als drei Sekunden Ton ab, ohne dass man ihn stoppen kann (1.4.2).
• [ ] Karussells und Animationen lassen sich pausieren (2.2.2), und nichts blitzt öfter als dreimal pro Sekunde (2.3.1).
• [ ] Vor dem Ablauf einer Sitzung werden Nutzende gewarnt und können sie verlängern (2.2.1).

Prüfung mit dem Screenreader

• [ ] Mit VoiceOver, NVDA oder TalkBack lassen sich die Hauptaufgaben erledigen – ein Produkt finden, in den Warenkorb legen, bestellen, Kontakt aufnehmen.
• [ ] Statusmeldungen wie „In den Warenkorb gelegt“ oder „3 Ergebnisse“ werden angesagt (4.1.3).
• [ ] Eigene Bedienelemente geben Name, Rolle und Zustand aus, z. B. „erweitert“ (4.1.2) (auto: teilweise).

Dokumente und Inhalte von Drittanbietern

• [ ] Verlinkte PDFs, Speisekarten, Preislisten und Formulare sind barrierefrei oder in einem barrierefreien Format verfügbar – siehe PDF auf Barrierefreiheit prüfen.
• [ ] Eingebettete Widgets – Chat, Bewertungen, Buchung, Karten – bestehen dieselben Prüfungen mit Tastatur und Screenreader.
• [ ] Sie verlassen sich nicht auf ein Overlay-Widget, um die Website zu reparieren; siehe warum Overlays keine Lösung sind.

Veröffentlichen und pflegen

• [ ] Eine Seite zur Barrierefreiheit erklärt, was Sie getan haben und wie Menschen eine Barriere melden können.
• [ ] Sie prüfen nach Theme-, Plugin- und App-Updates erneut, nicht nur einmal.

Von der Checkliste zum ADA-Audit

Diese Liste ist eine Selbstprüfung. Eine Audit-Checkliste, mit der Fachleute arbeiten, geht auf einer festgelegten Stichprobe von Seiten jedes WCAG-Kriterium der Stufen A und AA durch, mit einem schriftlichen Bericht – siehe Barrierefreiheit prüfen lassen. Bundesbehörden als Auftraggeber verlangen möglicherweise auch eine Prüfung nach Section 508 oder einen ACR auf Basis des VPAT. Die vollständige Liste Kriterium für Kriterium finden Sie in der WCAG-2.2-Checkliste; den rechtlichen Hintergrund unter ADA und Websites.

Die mit (auto) markierten Prüfungen lassen sich ohne Aufwand jede Woche wiederholen: Mit einem Tarif prüft Pandus jede Seite Ihrer Website und meldet sich, wenn neue Fehler auftauchen. Das ist eine automatische Prüfung, kein vollständiges Audit.

Quellen

• ADA.gov, Guidance on Web Accessibility and the ADA: https://www.ada.gov/resources/web-guidance/
• ADA.gov, Fact sheet zur Title-II-Regel für Web und mobile Apps: https://www.ada.gov/resources/2024-03-08-web-rule/
• W3C, WCAG 2.2: https://www.w3.org/TR/WCAG22/

Häufige Fragen

Gibt es eine offizielle ADA-Checkliste für Websites?

Nein. Der ADA enthält keine technische Website-Checkliste für private Unternehmen. Das US-Justizministerium verweist auf die WCAG und die Section-508-Standards; diese Checkliste folgt WCAG 2.2 Stufe AA.

Erfüllt meine Website den ADA, wenn ich diese Checkliste abgearbeitet habe?

Das kann keine Checkliste versprechen. Sie hilft Ihnen, die häufigsten Barrieren zu finden und zu beheben und Ihre Arbeit zu dokumentieren. Zu Ihrer rechtlichen Lage sprechen Sie mit einer Anwältin oder einem Anwalt.

Welche WCAG-Stufe sollte eine ADA-Checkliste nutzen?

Stufe AA. Die Title-II-Regel des DOJ für Bundesstaaten und Kommunen übernimmt WCAG 2.1 AA, und für Unternehmenswebsites ist WCAG 2.1 oder 2.2 AA der übliche Maßstab. WCAG 2.2 AA enthält fast alles aus 2.1 AA; siehe WCAG 2.1 vs. 2.2.

Kann ich die Checkliste als PDF herunterladen?

Ja. Die PDF-Fassung dieser Checkliste ist auf dieser Seite verlinkt, sodass Sie sie ausdrucken oder an Ihre Entwicklung oder Agentur weitergeben können.

Worin unterscheidet sich ein ADA-Audit von dieser Checkliste?

Ein Audit ist eine strukturierte Bewertung durch Fachleute gegen jedes WCAG-Kriterium, mit einem Bericht. Diese Checkliste ist eine praktische Selbstprüfung; sie deckt die wichtigsten Barrieren ab, aber nicht jedes Kriterium in der Tiefe.