WCAG 2.1 AA Checkliste für E-Commerce-Shops

Online-Shops gehören zu den am stärksten betroffenen Websites des EU Accessibility Act. Wenn Ihr Checkout nicht barrierefrei ist, können Millionen potenzielle Kunden nicht bei Ihnen kaufen. Diese Checkliste hilft Ihnen, die wichtigsten WCAG 2.1 AA Anforderungen für Ihren Shop zu prüfen.

Navigation und Seitenstruktur

Überschriftenhierarchie - Es gibt genau eine H1 pro Seite, darunter H2, H3 etc. in logischer Reihenfolge
Landmarks - Seite nutzt <header>, <nav>, <main>, <footer> korrekt
Skip-Link - "Zum Inhalt springen"-Link am Seitenanfang für Tastaturnutzer
Breadcrumbs - Navigationspfad ist vorhanden und korrekt ausgezeichnet
Seitensprache - <html lang="de"> ist gesetzt
Seitentitel - Jede Seite hat einen aussagekräftigen <title>

Produktbilder

Alt-Texte - Alle Produktbilder haben beschreibende Alt-Texte
Dekorative Bilder - Rein dekorative Bilder haben alt="" oder role="presentation"
Bildergalerien - Galerie ist per Tastatur bedienbar
Zoom-Funktion - Bildvergrößerung funktioniert per Tastatur und Screenreader

Produktinformationen

Preise - Preise werden als Text dargestellt, nicht nur als Bild
Farbvarianten - Farbauswahl zeigt nicht nur Farbe, sondern auch Text (z.B. "Rot", "Blau")
Verfügbarkeit - Status wird nicht nur über Farbe kommuniziert (z.B. Rot = ausverkauft)
Größentabellen - Tabellen haben korrekte Header (<th>) und sind responsiv
Bewertungen - Sterne-Bewertungen haben Textalternative (z.B. "4 von 5 Sternen")

Formulare und Eingaben

Labels - Jedes Eingabefeld hat ein sichtbares <label>
Pflichtfelder - Pflichtfelder sind mit aria-required="true" und visuell markiert
Fehlermeldungen - Fehler werden klar beschrieben und dem Feld zugeordnet (aria-describedby)
Autocomplete - Adress- und Zahlungsfelder nutzen autocomplete-Attribute
Suchfeld - Suchfunktion hat ein Label (sichtbar oder aria-label)

Warenkorb und Checkout

Warenkorb-Button - "In den Warenkorb"-Button hat einen eindeutigen Namen
Mengenauswahl - Mengenfelder sind per Tastatur bedienbar
Checkout-Schritte - Fortschritt wird angezeigt (z.B. "Schritt 2 von 4")
Bestellübersicht - Zusammenfassung vor der Bestellung ist klar strukturiert
Zahlungsmethoden - Radio-Buttons/Checkboxen für Zahlungsmethoden sind zugänglich
Fehlerbehebung - Nutzer können Fehler korrigieren bevor die Bestellung abgeschickt wird

Farbkontrast

Text - Normaler Text hat mindestens 4.5:1 Kontrastratio
Großer Text - Text ab 18px (oder 14px bold) hat mindestens 3:1
Links - Links sind nicht nur durch Farbe von normalem Text unterscheidbar
Buttons - Button-Text hat ausreichend Kontrast zum Hintergrund
Fokus-Indikator - Fokussierte Elemente haben einen sichtbaren Rahmen

Tastaturzugänglichkeit

Tab-Reihenfolge - Tab-Reihenfolge ist logisch (links nach rechts, oben nach unten)
Keine Tastaturfallen - Fokus bleibt nie in einem Element "gefangen"
Modals - Modale Dialoge fangen den Fokus und geben ihn beim Schließen zurück
Dropdown-Menüs - Navigations-Dropdowns sind per Tastatur bedienbar
Slider und Karussells - Produkt-Slider sind per Pfeiltasten steuerbar

Responsive Design

Zoom - Seite funktioniert bei 200% Zoom ohne Inhaltsverlust
Viewport - user-scalable=no ist NICHT gesetzt
Touch-Targets - Klickbare Elemente sind mindestens 44x44px groß (mobile)
Textgröße - Text ist in rem oder em angegeben, nicht in px

Filter und Sortierung

Filteroptionen - Filter sind als Checkboxen/Radio-Buttons umgesetzt, nicht nur als Links
Ergebnisanzeige - Änderungen der Ergebnisse werden per aria-live angekündigt
Aktive Filter - Aktive Filter sind klar erkennbar und entfernbar
Sortierung - Sortier-Dropdown hat ein Label

Wie Sie diese Checkliste nutzen

Automatisch testen - Ein Accessibility-Scanner deckt etwa 30-40% der WCAG-Kriterien automatisch ab (Alt-Texte, Kontrast, Labels, Landmarks)
Manuell prüfen - Gehen Sie die restlichen Punkte manuell durch, besonders den Checkout-Flow per Tastatur
Mit Screenreader testen - Prüfen Sie den gesamten Kaufprozess mit NVDA (Windows) oder VoiceOver (Mac)
Regelmäßig wiederholen - Jedes Update kann neue Barrieren einführen

Testen Sie Ihren Shop jetzt automatisch - kostenlos mit ScanClusive.