WCAG

1. WCAG kurz erklärt: Definition und Ziel

Die WCAG (Web Content Accessibility Guidelines) sind technische Empfehlungen des World Wide Web Consortiums (W3C) für barrierefreie digitale Inhalte. Sie legen fest, wie Websites, Onlineshops, Apps und Dokumente gestaltet sein müssen, damit sie für Menschen mit unterschiedlichen Einschränkungen zugänglich sind.

Die Richtlinien richten sich an:

• Designer und Entwickler von Websites und Webshops
• Produktverantwortliche und E-Commerce-Teams
• Behörden und Unternehmen, die rechtlichen Anforderungen an Barrierefreiheit unterliegen
• Agenturen, die Websites, Shops oder Content für Kunden umsetzen

Ziel der WCAG ist es, einheitliche, international anerkannte Standards zu schaffen, die Barrieren in der digitalen Nutzung abbauen und allen Nutzern einen gleichwertigen Zugang ermöglichen.

2. Aufbau der WCAG: Prinzipien, Richtlinien und Erfolgskriterien

Die WCAG sind hierarchisch aufgebaut und lassen sich in vier Ebenen gliedern: Prinzipien, Richtlinien, Erfolgskriterien und Techniken. Dieses Schichtenmodell hilft dir, Anforderungen systematisch zu verstehen und umzusetzen.

2.1 Die vier WCAG-Prinzipien (POUR)

Alle Anforderungen der WCAG lassen sich den vier Grundprinzipien zuordnen, die häufig mit der Abkürzung POUR bezeichnet werden:

• Perceivable (wahrnehmbar): Inhalte dürfen nicht unsichtbar für Sinneswahrnehmungen bleiben. Beispiel: Alternativtexte für Bilder oder Untertitel für Videos.
• Operable (bedienbar): Die Benutzeroberfläche muss sich vollständig bedienen lassen, etwa per Tastatur oder Screenreader.
• Understandable (verständlich): Inhalte und Bedienung sollen klar, konsistent und vorhersehbar sein.
• Robust (robust): Inhalte müssen mit verschiedenen Geräten, Browsern und Assistenztechnologien zuverlässig funktionieren.

Wenn eine Website eines dieser Prinzipien verletzt, kann sie nicht als vollständig barrierefrei gelten – selbst wenn einzelne Anforderungen erfüllt sind.

2.2 Richtlinien innerhalb der WCAG

Unterhalb der Prinzipien definieren die WCAG mehrere Richtlinien, die typische Barrieren adressieren. Beispiele:

• Textalternativen für Nicht-Text-Inhalte (z. B. Bilder)
• Anpassbare Darstellung (z. B. skalierbarer Text)
• Genügend Kontrast zwischen Text und Hintergrund
• Bedienbarkeit über Tastatur
• Vermeidung von Inhalten, die epileptische Anfälle auslösen können
• Konsistente Navigation und wiederkehrende Elemente

Diese Richtlinien geben dir eine inhaltliche Orientierung, wo typischerweise Barrieren auftreten und welche Aspekte du prüfen solltest.

2.3 Erfolgskriterien und Konformitätsstufen (A, AA, AAA)

Die eigentlichen, messbaren Anforderungen heißen Erfolgskriterien. Jedes Erfolgskriterium ist einer Konformitätsstufe zugeordnet:

• Level A: Minimale Barrierefreiheit; Basisanforderungen, ohne die viele Nutzer ausgeschlossen wären.
• Level AA: International üblicher Standard, auch Grundlage vieler gesetzlicher Regelungen (z. B. EU-Richtlinien).
• Level AAA: Höchste Stufe, oft nur für bestimmte Anwendungsfälle vollständig erreichbar.

Für die meisten kommerziellen Websites und Onlineshops ist WCAG 2.1 oder 2.2 Level AA der Zielstandard. Er kombiniert realistische Umsetzbarkeit mit einem hohen Grad an Barrierefreiheit.

3. WCAG-Versionen: WCAG 2.0, 2.1, 2.2 und Ausblick auf WCAG 3

Die WCAG werden laufend weiterentwickelt, um neue Technologien und Nutzungsformen abzudecken. In der Praxis solltest du Versionsunterschiede kennen, da sich rechtliche Vorgaben oft auf eine bestimmte Version beziehen.

3.1 WCAG 2.0

WCAG 2.0 wurden 2008 veröffentlicht und bilden die Grundlage für viele nationale Gesetze und Normen. Sie sind technologieunabhängig formuliert und konzentrieren sich auf klassische Desktop-Webseiten.

3.2 WCAG 2.1

WCAG 2.1 (2018) erweitern die 2.0-Version, insbesondere für:

• Mobile Nutzung (responsives Design, Touch-Bedienung)
• Nutzer mit Sehbehinderungen (z. B. verbesserte Kontraste, Zoomfähigkeit)
• Kognitive Einschränkungen und Lernschwierigkeiten

Alle Kriterien aus WCAG 2.0 bleiben gültig, 2.1 ergänzt sie um weitere Erfolgskriterien. In vielen Projekten ist heute WCAG 2.1 AA die relevante Zielvorgabe.

3.3 WCAG 2.2

WCAG 2.2 (veröffentlicht 2023) bauen wiederum auf 2.1 auf. Sie verstärken die Anforderungen an verständliche, fehlertolerante und nutzerfreundliche Oberflächen, zum Beispiel:

• Verbesserte Anforderungen an fokussierbare Elemente
• Bessere Unterstützung für Nutzer mit kognitiven Beeinträchtigungen
• Erleichterte Bedienung von komplexen Komponenten

Für neue Webprojekte ist es sinnvoll, sich bereits an WCAG 2.2 AA zu orientieren, auch wenn rechtliche Mindestanforderungen teilweise noch 2.1 nennen.

3.4 WCAG 3 (W3C WAI Guidelines – Ausblick)

Unter dem Arbeitstitel „WCAG 3“ arbeitet das W3C an einer umfassenden Weiterentwicklung. Ziel ist ein flexibleres, breiteres Modell, das nicht nur Webseiten, sondern verschiedene digitale Produkte abdeckt. WCAG 3 befinden sich jedoch noch im Entwicklungsstadium und sind derzeit keine verbindliche Grundlage für Konformitätsnachweise.

4. WCAG und rechtliche Anforderungen im DACH-Raum

Die WCAG selbst sind keine Gesetze, dienen aber weltweit als technische Basis für rechtliche Regelungen zur digitalen Barrierefreiheit. In vielen Ländern verweisen Gesetze oder Normen direkt oder indirekt auf WCAG 2.x.

Im deutschsprachigen Raum relevant sind unter anderem:

• EU-Richtlinie über den barrierefreien Zugang zu Websites und mobilen Anwendungen öffentlicher Stellen
• European Accessibility Act (EAA), der schrittweise auch viele private Anbieter, darunter E-Commerce, betrifft
• Nationale Gesetze wie das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland, das auf europäische Vorgaben verweist

Auch wenn dein Onlineshop (noch) nicht unmittelbar gesetzlich verpflichtet ist, bieten die WCAG eine verlässliche Orientierung, um rechtliche Risiken zu reduzieren und künftige Anforderungen vorzubereiten.

5. WCAG im E-Commerce: Relevanz für Onlineshops

Für Onlineshops sind die WCAG nicht nur eine Compliance-Frage, sondern auch ein Hebel für Umsatz, Conversion-Rate und Kundenzufriedenheit. Barrierefreie Shops erreichen mehr Nutzer und bieten eine insgesamt bessere User Experience.

5.1 Typische Barrieren in Onlineshops

Auf Produktdetailseiten, Kategorie-Seiten und im Checkout-Bereich treten häufig ähnliche Barrierequellen auf, etwa:

• Unzureichende Alternativtexte bei Produktbildern
• Bedienelemente (Filter, Variantenwahl), die sich nicht per Tastatur nutzen lassen
• Niedrige Farbkontraste bei Preisen, Buttons oder Hinweismeldungen
• Verwirrende Formularvalidierungen im Checkout ohne klare Fehlermeldungen
• Komplexe Navigationsstrukturen ohne klare Überschriftenhierarchie

Genau diese Punkte werden von WCAG-Erfolgskriterien adressiert und können systematisch geprüft und optimiert werden.

5.2 Geschäftlicher Nutzen von WCAG-Konformität

WCAG-orientierte Onlineshops profitieren in mehreren Dimensionen:

• Reichweite: Menschen mit Seh-, Hör- oder motorischen Einschränkungen können den Shop besser nutzen.
• Conversion-Rate: Klar strukturierte, verständliche Seiten mit guter Kontrast- und Fokusführung erleichtern allen Nutzern den Kauf.
• SEO: Viele WCAG-Anforderungen (z. B. saubere Semantik, Textalternativen, klare Überschriften) unterstützen gleichzeitig die Suchmaschinenoptimierung.
• Rechtssicherheit: Frühzeitige Orientierung an WCAG 2.1/2.2 senkt das Risiko rechtlicher Auseinandersetzungen.

Besonders bei großen Sortimenten mit tausenden SKUs können automatisierte, WCAG-orientierte Prozesse für Produkttexte und Seitentemplates einen skalierbaren Wettbewerbsvorteil schaffen.

6. Zentrale WCAG-Anforderungen in der Praxis

Um WCAG besser anwenden zu können, ist es hilfreich, einige typische Erfolgskriterien im Detail zu kennen. Sie geben dir konkrete Ansatzpunkte für Audits und Optimierungen.

6.1 Wahrnehmbarkeit: Textalternativen, Struktur, Kontraste

• Textalternativen (Alt-Texte): Jedes relevante Bild (z. B. Produktfoto) braucht einen beschreibenden Alternativtext. Dieser wird von Screenreadern vorgelesen und erscheint, wenn Bilder nicht geladen werden.
• Untertitel und Transkripte: Produktvideos oder Erklärvideos sollten Untertitel oder Textbeschreibungen enthalten, damit sie ohne Ton verständlich sind.
• Semantische Struktur: Überschriften sind als H2, H3 usw. auszuzeichnen, Listen als echte Listen. Das verbessert die Orientierung für Screenreader und Suchmaschinen.
• Farbkontrast: Text und interaktive Elemente müssen sich klar vom Hintergrund abheben, damit sie auch bei Sehschwächen lesbar bleiben.

6.2 Bedienbarkeit: Tastatursteuerung und Fokus

• Tastaturbedienung: Alle Funktionen – etwa das Auswählen von Produktvarianten, die Navigation durch Filter oder der Checkout – müssen ohne Maus nutzbar sein.
• Sichtbarer Fokus: Der aktuell fokussierte Link oder Button muss deutlich hervorgehoben sein, damit Nutzer sehen, wo sie sich befinden.
• Genügend Zeit und keine unerwarteten Änderungen: Inhalte sollten sich nicht ohne Aktion des Nutzers verändern, etwa durch automatische Weiterleitungen im Checkout.

6.3 Verständlichkeit: Sprache und Fehlermeldungen

• Einfache, klare Sprache: Produktbeschreibungen, Hinweise und Fehlermeldungen sollen verständlich formuliert sein.
• Konsistente Navigation: Menüs, Filter und Buttons sollen über den gesamten Shop hinweg gleich funktionieren und ähnlich benannt sein.
• Hilfreiche Fehlermeldungen: Wenn ein Pflichtfeld im Checkout fehlt, muss die Fehlermeldung präzise erklären, was zu tun ist.

6.4 Robustheit: Technische Umsetzung

• Valides HTML: Sauberer, standardkonformer Code unterstützt Screenreader und andere Assistenztechnologien.
• ARIA-Attribute: Für komplexe Komponenten (z. B. Akkordeons, Modale, Slider) sind oft WAI-ARIA-Rollen und -Attribute notwendig, um ihre Funktion zu beschreiben.
• Kompatibilität: Regelmäßige Tests in verschiedenen Browsern, auf verschiedenen Geräten und mit gängiger Assistenzsoftware sind empfehlenswert.

7. WCAG-Konformität prüfen und umsetzen

WCAG-Compliance ist kein einmaliges Häkchen, sondern ein laufender Prozess. Besonders im E-Commerce, wo sich Sortimente, Templates und Inhalte häufig ändern, sind strukturierte Workflows entscheidend.

7.1 Manuelle und automatisierte WCAG-Tests

Bei der Prüfung von WCAG-Konformität empfiehlt sich eine Kombination aus:

• Automatisierten Scans: Tools erkennen typische technische Verstöße wie fehlende Alt-Texte, Kontrastprobleme oder falsche Überschriftenstruktur.
• Manuellen Tests: Tastaturnavigation, Bedienung mit Screenreader und Beurteilung der Verständlichkeit lassen sich nicht vollständig automatisieren.
• Nutzerfeedback: Rückmeldungen von Nutzern mit Behinderungen liefern wertvolle Hinweise auf reale Barrieren.

7.1.1 WCAG-Audits und technisches SEO

Viele WCAG-Kriterien überschneiden sich mit technischen SEO-Best Practices, etwa strukturierter Code, klare Überschriften und sinnvolle Alternativtexte. Um OnPage-Potenziale und mögliche Probleme zu identifizieren, kannst du ergänzend einen strukturierten SEO-Check durchführen.

Analyse starten

Mit Nutzung dieses SEO-Checks erklären Sie, dass Sie die Datenschutzerklärung zur Kenntnis genommen haben und damit einverstanden sind, dass die von Ihnen angegebenen Daten elektronisch erhoben und gespeichert werden. Ihre Daten werden dabei nur streng zweckgebunden zur Bearbeitung des SEO-Checks benutzt. Mit der Nutzung dieses SEO-Checks erklären Sie sich mit der Verarbeitung einverstanden.

🔒

Tageslimit erreicht!

Erstelle dir einen Free Account für die Performance Suite und erhalte trotzdem weitere Daten zu deiner URL.

Direkter Zugriff mit Free Account

SEO-Score: N/A von 100

i Link Power:	Check fehlgeschlagen
i Ladezeiten:	Check fehlgeschlagen
i Technik-Score:	Check fehlgeschlagen
i CMS:
i Gehosted bei:
i WordPress Theme:

Backlinks

i Backlinks: N/A

i Domain Pop: N/A

i Ip Pop: N/A

i Link Power: N/A

i Spam Score: N/A

Ladezeiten

i YSlow: N/A

i Ladezeiten (Desktop): N/A

i Ladezeiten (Mobile): N/A

i PageSpeed (Desktop): N/A

i PageSpeed (Mobile): N/A

i Größe (Desktop): N/A

i Größe (Mobile): N/A

i Elemente (Desktop): N/A

i Elemente (Mobile): N/A

Technik

i 200: N/A

i 2xx: N/A

i 4xx: N/A

i 5xx: N/A

i 301: N/A

i 302: N/A

i Antwortzeit: N/A

i Robots.txt vorhanden: N/A

i Sitemap vorhanden: N/A

Prio SEO-Checks

Sitemap.xmli

Robots.txti

Link Poweri

Spam Scorei

404 Fehleri

503 Fehleri

Ladezeiteni

Antwortzeit des Serversi

Zu kurze Textei

Ladezeiten (Desktop)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Ladezeiten (Mobile)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Technik-Check

Check fehlgeschlagen

✕ Status Codes

✕ Fehler

✕ Übersicht der Checks

Vorhandene Backlinks

Check fehlgeschlagen

▲ Auflistung der Links

	URL	Linktext	LinkPower

7.2 WCAG im Content-Workflow

Gerade bei großen Katalogen ist es sinnvoll, WCAG-Anforderungen systematisch in den Content-Prozess einzubauen, zum Beispiel:

• Definition von Vorlagen für Produkttexte und Kategorietexte mit klarer Überschriftenstruktur
• Standardregeln für Alternativtexte von Produktbildern
• Prüfschritte für Farbkontraste und Lesbarkeit bei neuen Seitendesigns
• Regelmäßige Content-Refreshes, um neue Produkte oder Attribute WCAG-konform einzubinden

Feedbasierte, automatisierte Textgenerierungstools wie feed2content.ai® können hier helfen, einheitliche und strukturiert aufgebaute Produkttexte aus Produktfeeds abzuleiten und so die WCAG-Anforderungen an Struktur, Verständlichkeit und Semantik skalierbar umzusetzen.

8. Abgrenzung: WCAG, BITV, EN 301 549 und weitere Standards

Im Umfeld digitaler Barrierefreiheit tauchen häufig verschiedene Abkürzungen auf. Die WCAG bilden dabei die technische Grundlage für viele weitere Regelwerke.

• WCAG: Internationale Richtlinien des W3C für Webinhalte.
• BITV (Barrierefreie-Informationstechnik-Verordnung): Deutsche Verordnung für Barrierefreiheit in der öffentlichen Verwaltung, die sich auf WCAG bezieht.
• EN 301 549: Europäische Norm, die Anforderungen an die Barrierefreiheit von IKT-Produkten und -Dienstleistungen definiert, ebenfalls auf Basis der WCAG.
• Section 508 (USA): Regelt Barrierefreiheit in der Bundesverwaltung und verweist ebenfalls auf WCAG 2.0.

Für internationale E-Commerce-Unternehmen ist es sinnvoll, WCAG 2.1 oder 2.2 AA als globalen Referenzstandard zu etablieren. So lassen sich Anforderungen aus verschiedenen Ländern und Regelwerken konsistent erfüllen.

9. Best Practices: WCAG-orientierte Optimierung für Onlineshops

Wenn du deinen Shop gezielt an WCAG ausrichten willst, helfen dir folgende Best Practices als Startpunkt:

• Definiere ein klares Zielniveau (z. B. WCAG 2.1 AA) und dokumentiere es.
• Starte mit einem Audit der wichtigsten Seitentypen: Startseite, Kategorie, Produktdetail, Warenkorb, Checkout.
• Lege Richtlinien für Produkttexte, Bilder, Buttons und Formulare im Designsystem fest.
• Integriere WCAG-Kriterien in die Entwicklungspipeline (Code-Reviews, Testing).
• Schule beteiligte Rollen (Design, Entwicklung, Content, SEO) in grundlegender Barrierefreiheit.
• Nutze wo möglich automatisierte Prozesse, um konsistente Struktur und Formatierung sicherzustellen.

10. Häufige Fragen zu WCAG

11. Nächste Schritte: WCAG-optimierten Content skalieren

Wenn du Barrierefreiheit nach WCAG mit skalierbarem E-Commerce-Content verbinden willst, lohnt sich ein Blick auf automatisierte, feedbasierte Workflows. So kannst du Produktdaten aus deinem Feed in konsistente, strukturiert aufgebaute Texte überführen, die sowohl Nutzeranforderungen als auch SEO- und WCAG-Kriterien berücksichtigen.

Du möchtest ein solches Setup live sehen und testen, wie sich deine Produktdaten in fertige Texte verwandeln lassen?