WCAG-AA-Checkliste für Online-Shops: 15 Punkte zur Selbstprüfung
Die folgende Liste enthält die häufigsten Barrierefreiheitsprobleme, die wir in Online-Shops sehen. Die meisten können Sie selbst prüfen, ganz ohne Fachwissen – einige erkennt unser kostenloser Scanner für Sie. Die Punkte sind von einfach bis schwierig geordnet.
Text und Bilder
1. Textkontrast (WCAG 1.4.3)
Hellgrauer Text auf weißem Hintergrund ist ein Klassiker in Online-Shops – und einer der häufigsten Fehler. Normaler Text braucht einen Kontrast von mindestens 4,5:1, großer Text (Überschriften über ca. 24 px) – 3:1. Prüfen Sie besonders: Preise, Produktbeschreibungen, Texte im Footer, Hinweise auf Aktionen.
2. Alternativtexte der Produktfotos (WCAG 1.1.1)
Jedes Produktfoto braucht ein alt-Attribut mit einer Beschreibung, z. B. alt="Schwarzer City-Rucksack, 20 l, mit Laptopfach".
Ein blinder Mensch „sieht“ sich den Shop mit einem Screenreader an – ohne Beschreibungen kauft er im Dunkeln.
Rein dekorative Bilder kennzeichnen Sie mit einem leeren alt="".
3. Textvergrößerung bis 200 % (WCAG 1.4.4)
Ein sehbehinderter Mensch vergrößert die Seite im Browser (Strg und +). Prüfen Sie, ob bei 200 %
nichts „verrutscht“: Preise verschwinden nicht aus dem Bildschirm, die „Kaufen“-Buttons bleiben sichtbar.
Blockieren Sie das Pinch-Zoom auf dem Handy nicht (user-scalable=no ist ein Verstoß).
Navigation und Tastatur
4. Der komplette Einkauf ohne Maus (WCAG 2.1.1)
Legen Sie die Maus beiseite und durchlaufen Sie mit der Tab-Taste den gesamten Prozess: Produktsuche → Produktseite → Warenkorb → Lieferformular → Bezahlung. Wenn Sie an einer Stelle „hängen bleiben“ – bleibt auch ein Kunde mit Behinderung hängen.
5. Sichtbarer Fokus (WCAG 2.4.7)
Beim Navigieren mit der Tab-Taste muss deutlich sichtbar sein, welches Element aktiv ist
(Umrandung, Hervorhebung). Viele Templates entfernen die outline, „weil sie hässlich aussieht“ –
das ist ein Fehler. Sie können sie schick gestalten, aber nicht entfernen.
6. Link „Zum Inhalt springen“ (WCAG 2.4.1)
Ein Tastaturnutzer sollte sich nicht auf jeder Unterseite durch 30 Menüpunkte arbeiten müssen. Das erste Element auf der Seite sollte den Sprung direkt zum Hauptinhalt ermöglichen.
7. Aussagekräftige Seitentitel (WCAG 2.4.2)
Jede Unterseite sollte einen eigenen <title> haben: „City-Rucksäcke – Muster-Shop“,
nicht überall nur „Muster-Shop“. Der Titel ist das Erste, was ein Screenreader-Nutzer hört.
Formulare und Kaufprozess
8. Beschriftungen der Formularfelder (WCAG 3.3.2)
Jedes Feld (Name, Adresse, Postleitzahl, E-Mail) braucht eine zugeordnete Beschriftung
(<label>), nicht nur einen Platzhalter – der Platzhalter verschwindet bei der Eingabe
und wird nicht von allen Screenreadern korrekt vorgelesen.
9. Verständliche Fehlermeldungen (WCAG 3.3.1, 3.3.3)
„Fehler im Formular“ reicht nicht. Schreiben Sie, was nicht stimmt und wie man es korrigiert: „Die Postleitzahl sollte fünfstellig sein (z. B. 10115).“ Ein Fehler darf nicht allein durch Farbe signalisiert werden (ein roter Rahmen sagt einem blinden Menschen nichts).
10. Buttons mit verständlichem Namen (WCAG 4.1.2)
Ein Warenkorb-Icon ohne jeglichen Text ist für den Screenreader nur ein „Button“ – ohne Information, was er tut.
Ergänzen Sie aria-label="In den Warenkorb" oder sichtbaren Text.
Struktur und Multimedia
11. Überschriftenhierarchie (WCAG 1.3.1)
Überschriften sind das Inhaltsverzeichnis der Seite: eine <h1>, dann <h2>,
<h3> – ohne Ebenen zu überspringen, „weil es hübscher aussieht“.
Das Aussehen ändern Sie per CSS, nicht über die Überschriftenebenen.
12. Sprache der Seite (WCAG 3.1.1)
Stellen Sie sicher, dass <html lang="de"> gesetzt ist. Andernfalls liest
der Screenreader das deutsche Angebot mit englischem Akzent vor – das klingt komisch, ist aber ein reales Problem.
13. Untertitel und Transkripte für Videos (WCAG 1.2.2)
Ein Video, das ein Produkt vorstellt? Fügen Sie Untertitel hinzu. Das hilft nicht nur gehörlosen Menschen – die meisten Nutzer schauen Videos ohne Ton.
14. Größe der Berührungsziele (WCAG 2.5.8)
Buttons und Links auf dem Handy sollten mindestens 24×24 px groß sein (empfohlen 44×44 px). Ein winziges „ד zum Schließen eines Popups oder Mini-Links im Footer frustrieren alle – nicht nur Menschen mit Behinderungen.
15. Erklärung zur Barrierefreiheit
Informieren Sie die Nutzer über den Stand der Barrierefreiheit Ihrer Website und geben Sie ihnen einen Kanal zum Melden von Problemen. Das schafft Vertrauen und zeigt guten Willen.
Wo anfangen?
Sie müssen nicht alles auf einmal beheben. Beginnen Sie mit dem kostenlosen Scan, der Ihnen zeigt, welche Punkte dieser Liste bei Ihnen auftreten, korrigieren Sie dann Kontraste und alt-Attribute (die häufigsten und günstigsten Korrekturen) und widmen Sie sich zuletzt Tastatur und Formularen. Den vollständigen PDF-Bericht für die gesamte Domain (bis zu 20 Seiten) bestellen Sie für 35 €.
Prüfen Sie die Punkte 1–12 automatisch
Unser Scanner prüft die meisten technischen Punkte dieser Liste in 60 Sekunden.