Skip to main content

WCAG 2.1 AA Compliance-Checkliste für EU-Online-Shops

· WCAG · Compliance · EAA · Checkliste · Alt-Text

WCAG 2.1 Level AA ist der technische Standard, den der European Accessibility Act verlangt. Wenn Ihr Shop Kunden irgendwo in der EU beliefert, müssen Sie ihn einhalten. Diese Checkliste deckt alle Anforderungen des Standards ab, gegliedert nach den vier POUR-Prinzipien.

Was die POUR-Prinzipien in der Praxis bedeuten

WCAG 2.1 gruppiert alle Anforderungen unter vier Prinzipien:

  • Perceivable (Wahrnehmbar) — Inhalte müssen über mindestens einen Sinn zugänglich sein, auch wenn Nutzer nicht sehen oder hören können
  • Operable (Bedienbar) — jede Interaktion muss ohne Maus funktionieren
  • Understandable (Verständlich) — Inhalte und Seitenverhalten müssen vorhersehbar sein
  • Robust (Robust) — der Code muss mit heutigen und zukünftigen assistiven Technologien funktionieren

Level AA liegt in der Mitte der drei Stufen (A, AA, AAA) und ist das, was der EAA ausdrücklich fordert.

Wahrnehmbar

Bilder und Medien

  • Jedes bedeutungsvolle Bild hat Alt-Text, der beschreibt, was es zeigt und warum es auf der Seite ist.
  • Dekorative Bilder haben ein leeres alt=""-Attribut, damit Screenreader sie überspringen. Das Weglassen des alt-Attributs ist ein WCAG-Fehler; eine leere Zeichenkette ist das korrekte Signal.
  • Videos haben Untertitel, die dem gesprochenen Inhalt entsprechen. Automatisch generierte Untertitel erfüllen diese Anforderung nicht ohne Überprüfung und Korrektur.
  • Reine Audio-Inhalte haben ein Texttranskript.

Farbkontrast

  • Normaler Fließtext (unter 18pt) muss ein Kontrastverhältnis von 4,5:1 gegenüber dem Hintergrund erreichen.
  • Großer Text (ab 18pt) muss 3:1 erreichen.
  • Keine Information wird ausschließlich durch Farbe vermittelt. Ein roter Fehlerrahmen benötigt zusätzlich ein Symbol oder eine Textbeschriftung.

Layout und Zoom

  • Seiten verlieren keine Inhalte, wenn Text auf 200% skaliert wird.
  • Bei einer Browserbreite von 1280px ist kein horizontales Scrollen erforderlich.

Bedienbar

Tastaturzugang

  • Jeder Link, jede Schaltfläche, jedes Formularfeld und jedes interaktive Element ist mit der Tab-Taste erreichbar.
  • Es gibt keine Tastaturfallen: Wenn ein Nutzer in eine Komponente navigieren kann, kann er sie auch wieder verlassen, ohne die Seite neu zu laden.
  • Am Anfang jeder Seite erscheint ein "Zum Hauptinhalt springen"-Link.
  • Der Tastaturfokus-Indikator ist jederzeit sichtbar. Ihn per CSS zu entfernen, ist ein WCAG-Fehler.

Navigation und Zeitvorgaben

  • Seitentitel beschreiben die aktuelle Seite, nicht nur den Sitenamen.
  • Links beschreiben ihr Ziel. "Mehr lesen" und "hier klicken" erfüllen dieses Kriterium ohne Kontext nicht.
  • Zeitlimits können verlängert, pausiert oder deaktiviert werden.
  • Karussells und automatisch abgespielte Inhalte haben Pause-Steuerelemente.

Verständlich

Sprache und Fehlermeldungen

  • Das <html>-Element hat ein lang-Attribut, das der Seitensprache entspricht (z. B. lang="de").
  • Formularfelder haben Labels. Ein Placeholder-Attribut ist kein Label.
  • Fehlermeldungen erklären, was falsch war und wie es behoben werden kann.

Vorhersehbares Verhalten

  • Seiten ändern den Kontext nicht automatisch, wenn ein Nutzer eine Option auswählt oder ein Kontrollkästchen aktiviert.
  • Die Navigation bleibt auf allen Seiten an derselben Stelle.

Robust

Codequalität

  • HTML-Elemente haben korrekte öffnende und schließende Tags.
  • Keine Seite enthält doppelte id-Werte.
  • Benutzerdefinierte Komponenten — Modals, Tabs, Akkordeons, Datumsauswähler — legen ihre Rolle, ihren Namen und ihren Zustand über ARIA-Attribute offen.

Wo E-Commerce-Shops am häufigsten scheitern

Bild-Alt-Texte verursachen mehr WCAG-Beschwerden als jedes andere Kriterium. Das Problem ist operationeller Natur: Entwickler vergessen Alt-Texte selten in Templates, aber Produktbilder werden täglich von Personen hochgeladen, die keine Entwickler sind. Ein Shop mit 500 Produkten kann durch den normalen Betrieb Tausende fehlender Beschreibungen ansammeln.

Tastaturnavigation ist die zweithäufigste Lücke. Viele kommerzielle Themes werden nur mit der Maus entwickelt und getestet.

So prüfen Sie Ihre Website

Führen Sie einen kostenlosen WCAG-Scan Ihres Shops durch. Der Scan prüft Ihre Seite gegen WCAG 2.1 AA-Regeln und gibt ein Ergebnis mit konkreten Problemstellen zurück.

Automatisches Scannen erkennt 30 bis 40 Prozent der WCAG-Probleme. Der Rest erfordert manuelle Tests. Für die EAA-Barrierefreiheitserklärung nach Anhang V müssen Sie dokumentieren, was dem Standard entspricht und was nicht, einschließlich eines Zeitplans zur Behebung.

Alt-Text in großem Maßstab

Alt-Texte manuell zu schreiben ist bei einem Katalog mit 50 Produkten realistisch. Ab 500 wird es zu einem operationellen Problem.

Altvisor generiert WCAG 2.1 AA-konformen Alt-Text in allen 24 offiziellen EU-Sprachen. Sie verarbeiten Ihre Produktbilder, prüfen die Ergebnisse und veröffentlichen, wenn Sie zufrieden sind.

Erstellen Sie ein kostenloses Konto, um zu sehen, wie viele Bilder in Ihrem Shop keinen konformen Alt-Text haben, und führen Sie einen WCAG-Scan für ein vollständiges Bild Ihrer aktuellen Situation durch.