WCAG einfach erklärt: Die wichtigsten Regeln für barrierefreie Online-Shops
Die Web Content Accessibility Guidelines, kurz WCAG, sind der international anerkannte Standard für digitale Barrierefreiheit.
Sie beschreiben, wie Websites und digitale Anwendungen gestaltet und entwickelt werden sollten, damit Menschen mit unterschiedlichen Behinderungen sie nutzen können.
Dazu gehören unter anderem Menschen mit:
Blindheit oder Sehbehinderungen,
Gehörlosigkeit oder Hörbehinderungen,
motorischen Einschränkungen,
kognitiven Einschränkungen,
Lernbehinderungen,
Sprachbehinderungen,
neurologischen Einschränkungen.
Für Online-Shops sind die WCAG besonders wichtig. Sie betreffen nahezu jeden Teil der Customer Journey: von der Navigation über die Produktauswahl bis zum Checkout.
In dieser Artikelserie erklären wir die WCAG Schritt für Schritt. Dieser Beitrag bietet zunächst einen Überblick. Zukünftig widmen wir den einzelnen Erfolgskriterien eigene Beiträge mit Beispielen aus Online-Shops.
Quelle: World Wide Web Consortium, Web Accessibility Initiative, Web Content Accessibility Guidelines (WCAG) 2.2. Das W3C beschreibt darin Anforderungen, durch die Webinhalte für Menschen mit unterschiedlichen Behinderungen zugänglicher werden. (W3C)
Was sind die WCAG?
WCAG steht für Web Content Accessibility Guidelines. Auf Deutsch wird der Begriff häufig mit „Richtlinien für barrierefreie Webinhalte“ übersetzt.
Entwickelt werden die WCAG von der Web Accessibility Initiative des World Wide Web Consortium, kurz W3C. Das W3C entwickelt internationale Standards für das Web.
Die WCAG sind technologieunabhängig formuliert. Sie gelten daher nicht nur für klassische HTML-Seiten. Ihre Anforderungen können auch auf Webanwendungen, Shopsysteme und mobile Inhalte angewendet werden.
Die Erfolgskriterien beschreiben überprüfbare Anforderungen. Ergänzend stellt das W3C ausführliche Erklärungen und technische Umsetzungsmöglichkeiten zur Verfügung.
Quelle: World Wide Web Consortium, Web Accessibility Initiative, WCAG 2 Overview und The WCAG 2 Documents. Das W3C beschreibt die WCAG als stabilen, referenzierbaren technischen Webstandard. (W3C)
Welche WCAG-Version ist aktuell?
Die derzeit aktuelle abgeschlossene Version ist WCAG 2.2.
WCAG 2.2 baut auf den früheren Versionen WCAG 2.0 und WCAG 2.1 auf. Die Anforderungen der älteren Versionen bleiben weitgehend enthalten. Wer WCAG 2.2 erfüllt, erfüllt daher grundsätzlich auch die Anforderungen aus WCAG 2.1 und WCAG 2.0.
Gegenüber WCAG 2.1 enthält WCAG 2.2 neun zusätzliche Erfolgskriterien. Diese betreffen unter anderem:
besser sichtbare Tastaturfokusse,
nicht verdeckte fokussierte Elemente,
ausreichend große oder weit auseinanderliegende Klickflächen,
barrierearme Anmeldeverfahren,
konsistente Hilfsangebote,
die Vermeidung mehrfach notwendiger Eingaben.
Das frühere Kriterium 4.1.1 „Parsing“ wurde in WCAG 2.2 als veraltet entfernt.
WCAG 3 befindet sich noch in Entwicklung. Es handelt sich derzeit nicht um einen fertigen Standard. Für aktuelle Projekte bleibt deshalb WCAG 2.2 die maßgebliche abgeschlossene W3C-Version.
Quellen: World Wide Web Consortium, Web Accessibility Initiative, What’s New in WCAG 2.2 und WCAG 3 Introduction. WCAG 2.2 ergänzt neun Erfolgskriterien; WCAG 3 ist weiterhin ein unvollständiger Entwurf. (W3C)
Die vier Grundprinzipien der WCAG
Die Erfolgskriterien der WCAG sind vier Grundprinzipien zugeordnet:
wahrnehmbar,
bedienbar,
verständlich,
robust.
Im Englischen heißen diese Prinzipien:
Perceivable,
Operable,
Understandable,
Robust.
Aus den Anfangsbuchstaben entsteht das Merkwort POUR.
Diese vier Prinzipien helfen dabei, Barrierefreiheit nicht als Sammlung einzelner technischer Fehler zu betrachten. Sie richten den Blick auf die grundlegende Frage:
Können unterschiedliche Menschen die Inhalte wahrnehmen, die Funktionen bedienen, den Shop verstehen und assistive Technologien zuverlässig einsetzen?
Quelle: World Wide Web Consortium, Web Content Accessibility Guidelines 2.2. Die WCAG gliedern ihre Richtlinien und Erfolgskriterien in die vier Prinzipien „Perceivable“, „Operable“, „Understandable“ und „Robust“. (W3C)
1. Wahrnehmbar
Informationen müssen so angeboten werden, dass Nutzerinnen und Nutzer sie wahrnehmen können.
Das bedeutet nicht, dass alle Menschen Inhalte auf dieselbe Weise wahrnehmen müssen. Informationen sollten vielmehr in unterschiedlichen Formen zugänglich sein.
Ein Bild kann visuell wahrgenommen werden. Für blinde Menschen braucht es jedoch einen geeigneten Alternativtext. Gesprochene Inhalte in einem Video benötigen für gehörlose Menschen Untertitel.
Für Online-Shops betrifft das zum Beispiel:
Alternativtexte für Produktbilder,
ausreichende Farbkontraste,
Untertitel für Produktvideos,
eine sinnvolle Überschriftenstruktur,
verständliche Beschriftungen von Formularfeldern,
Inhalte, die auch bei Vergrößerung nutzbar bleiben,
Informationen, die nicht ausschließlich über Farbe vermittelt werden.
Ein roter Rahmen um ein fehlerhaftes Formularfeld reicht beispielsweise nicht aus. Menschen, die Farben nicht oder nur eingeschränkt wahrnehmen, benötigen einen zusätzlichen verständlichen Hinweis.
Quelle: World Wide Web Consortium, Web Accessibility Initiative, WCAG 2 at a Glance. Das Prinzip „Wahrnehmbar“ umfasst unter anderem Textalternativen, anpassbare Inhalte, unterscheidbare Inhalte sowie Alternativen für Audio und Video. (W3C)
2. Bedienbar
Alle Funktionen müssen bedienbar sein.
Menschen nutzen Websites nicht ausschließlich mit einer Maus. Einige verwenden eine Tastatur, Spracheingabe, einen Screenreader, spezielle Schalter oder andere assistive Technologien.
Für einen Online-Shop bedeutet das unter anderem:
Alle Funktionen sind mit der Tastatur erreichbar.
Der Tastaturfokus ist deutlich sichtbar.
Die Reihenfolge der Bedienung ist logisch.
Es entstehen keine Tastaturfallen.
Dialoge können geöffnet und geschlossen werden.
Nutzerinnen und Nutzer erhalten ausreichend Zeit.
Bewegte Inhalte können pausiert werden.
Seitentitel und Überschriften unterstützen die Orientierung.
Links und Schaltflächen haben verständliche Bezeichnungen.
Besonders wichtig ist die Bedienbarkeit bei dynamischen Funktionen wie Produktfiltern, Varianten, Bildergalerien und Warenkörben.
Ein Produkt kann noch so gut beschrieben sein: Wenn sich die gewünschte Größe nicht mit der Tastatur auswählen lässt, bleibt es für einige Menschen nicht kaufbar.
Quellen: World Wide Web Consortium, Web Accessibility Initiative, WCAG 2 at a Glance und Understanding Success Criterion 2.4.3: Focus Order. Das W3C fordert unter anderem eine Tastaturbedienung und eine Reihenfolge, die Bedeutung und Bedienbarkeit erhält. (W3C)
3. Verständlich
Inhalte und Bedienung müssen verständlich sein.
Dabei geht es sowohl um die Sprache als auch um das Verhalten der Benutzeroberfläche.
Für Online-Shops bedeutet das beispielsweise:
Texte und Anweisungen sind klar formuliert.
Navigation und Bedienelemente verhalten sich vorhersehbar.
Formularfelder besitzen verständliche Beschriftungen.
Pflichtfelder sind eindeutig gekennzeichnet.
Fehler werden verständlich erklärt.
Eingaben können überprüft und korrigiert werden.
Wiederkehrende Funktionen sind konsistent angeordnet.
Unterstützung ist leicht auffindbar.
Eine Meldung wie „Eingabe ungültig“ hilft nur begrenzt. Besser ist eine konkrete Erklärung:
„Bitte geben Sie die Postleitzahl mit fünf Ziffern ein.“
Verständlichkeit ist nicht nur für Menschen mit kognitiven Einschränkungen wichtig. Klare Texte, vorhersehbare Abläufe und hilfreiche Fehlermeldungen verbessern die Nutzung für alle Kundinnen und Kunden.
Quelle: World Wide Web Consortium, Web Accessibility Initiative, WCAG 2 at a Glance. Das Prinzip „Verständlich“ umfasst lesbare Inhalte, vorhersehbare Bedienung sowie Unterstützung bei Eingaben und Fehlern. (W3C)
4. Robust
Inhalte müssen so umgesetzt sein, dass sie von unterschiedlichen Browsern und assistiven Technologien zuverlässig verarbeitet werden können.
Dafür ist eine saubere technische Struktur erforderlich.
Native HTML-Elemente vermitteln bereits eine Bedeutung. Ein korrekt eingesetzter Button wird beispielsweise von Browsern, Tastaturen und Screenreadern als bedienbare Schaltfläche erkannt.
Ein optisch wie ein Button gestaltetes allgemeines Element besitzt diese Bedeutung dagegen nicht automatisch.
Für Online-Shops betrifft Robustheit unter anderem:
semantisch korrektes HTML,
verständliche Namen für Bedienelemente,
korrekt eingesetzte ARIA-Attribute,
programmatisch erkennbare Zustände,
angekündigte Statusänderungen,
kompatible Formulare und Dialoge,
robuste Eigenentwicklungen und Shop-Komponenten.
ARIA kann fehlende Informationen ergänzen. Falsch eingesetztes ARIA kann jedoch neue Barrieren erzeugen. Deshalb sollte nach Möglichkeit zunächst auf geeignete native HTML-Elemente zurückgegriffen werden.
Quelle: World Wide Web Consortium, Web Content Accessibility Guidelines 2.2. Das Prinzip „Robust“ fordert, dass Inhalte von unterschiedlichen Benutzeragenten einschließlich assistiver Technologien zuverlässig interpretiert werden können. (W3C)
Was bedeuten die Konformitätsstufen A, AA und AAA?
Die WCAG ordnen ihre Erfolgskriterien drei Stufen zu:
Stufe A
Stufe A enthält grundlegende Anforderungen.
Werden diese nicht erfüllt, können bestimmte Menschen Inhalte oder Funktionen möglicherweise überhaupt nicht nutzen.
Dazu gehören zum Beispiel Anforderungen an Alternativtexte, Tastaturbedienung und die semantische Zuordnung von Informationen.
Stufe AA
Stufe AA ergänzt weitere wichtige Anforderungen.
Dazu gehören beispielsweise bestimmte Mindestkontraste, sichtbare Tastaturfokusse, eine sinnvolle Fokusreihenfolge und Anforderungen an die Nutzung bei Vergrößerung.
AA ist in vielen Projekten die zentrale Zielstufe.
Dabei bedeutet eine Konformität mit Stufe AA: Alle anwendbaren Erfolgskriterien der Stufen A und AA müssen erfüllt sein. Es reicht nicht aus, nur einen bestimmten prozentualen Anteil zu bestehen.
Stufe AAA
Stufe AAA enthält weitergehende Anforderungen.
Dazu gehören beispielsweise besonders hohe Kontraste oder zusätzliche Anforderungen an verständliche Inhalte.
Nicht jede Art von Website kann sämtliche AAA-Kriterien erfüllen. Das W3C empfiehlt deshalb nicht, eine vollständige Konformität mit Stufe AAA pauschal als allgemeine Anforderung für ganze Websites festzulegen.
Einzelne AAA-Kriterien können trotzdem sehr sinnvoll sein und die Nutzung deutlich verbessern.
Quelle: World Wide Web Consortium, Web Content Accessibility Guidelines 2.2, Abschnitt „Conformance Requirements“. Die WCAG definieren die Konformitätsstufen A, AA und AAA und verlangen für eine Stufe die Erfüllung aller Kriterien dieser und der niedrigeren Stufen. (W3C)
Ist ein Shop barrierefrei, wenn die Startseite die WCAG erfüllt?
Nein.
Eine WCAG-Konformität bezieht sich nicht einfach auf einzelne geprüfte Elemente. Auch vollständige Prozesse müssen funktionieren.
Bei einem Online-Shop gehören dazu beispielsweise:
ein Produkt suchen,
Ergebnisse filtern,
eine Produktseite öffnen,
Größe oder Variante auswählen,
das Produkt in den Warenkorb legen,
Kundendaten eingeben,
Versand und Zahlungsart auswählen,
die Bestellung überprüfen,
den Kauf abschließen.
Wenn ein notwendiger Schritt nicht barrierefrei ist, ist der gesamte Prozess für bestimmte Menschen nicht nutzbar.
Auch eingebundene Inhalte und Komponenten müssen berücksichtigt werden. Das betrifft zum Beispiel:
Cookie-Banner,
Zahlungsdienste,
Bewertungsfunktionen,
Chat-Systeme,
externe Produktkonfiguratoren,
Adressprüfungen,
Captchas.
Ein zugänglicher Shop kann deshalb nicht allein anhand seiner Startseite beurteilt werden.
Quelle: World Wide Web Consortium, Web Content Accessibility Guidelines 2.2, Konformitätsanforderung „Complete Processes“. Wenn eine Seite Teil eines vollständigen Prozesses ist, müssen alle Seiten dieses Prozesses auf der beanspruchten Stufe konform sein. (W3C)
Sind die WCAG eine Checkliste?
Die Erfolgskriterien können wie eine Prüfliste verwendet werden. Dennoch sollte Barrierefreiheit nicht als reines Abhaken verstanden werden.
Die WCAG beschreiben überprüfbare Mindestanforderungen. Sie können jedoch nicht jede individuelle Nutzungssituation und jede mögliche Behinderung vollständig abdecken.
Auch eine formal WCAG-konforme Website kann in einzelnen Bereichen kompliziert oder wenig nutzerfreundlich sein.
Deshalb sollten zusätzlich betrachtet werden:
die tatsächliche User Journey,
die Verständlichkeit der Inhalte,
die Nutzung mit assistiven Technologien,
die Auswirkungen einer Barriere,
die Häufigkeit eines Problems,
die Bedürfnisse der Zielgruppen,
Tests mit Menschen mit Behinderungen.
Die WCAG bilden eine wichtige Grundlage. Gute digitale Barrierefreiheit entsteht aber erst dann, wenn die Kriterien in reale Nutzungssituationen übersetzt werden.
Quelle: World Wide Web Consortium, Web Content Accessibility Guidelines 2.2. Das W3C weist darauf hin, dass die WCAG viele Bedürfnisse abdecken, jedoch nicht alle Bedürfnisse aller Menschen und Behinderungsformen berücksichtigen können. (W3C)
Können die WCAG automatisch geprüft werden?
Nur teilweise.
Automatisierte Prüfwerkzeuge können viele wiederkehrende technische Fehler schnell erkennen. Dazu gehören beispielsweise:
fehlende Alternativtext-Attribute,
bestimmte Kontrastfehler,
leere Schaltflächen,
ungültige ARIA-Attribute,
unbeschriftete Formularfelder,
einige strukturelle Probleme.
Viele Erfolgskriterien benötigen jedoch eine menschliche Bewertung.
Ein automatisches Werkzeug kann zum Beispiel feststellen, dass ein Alternativtext vorhanden ist. Es kann aber nicht zuverlässig beurteilen, ob dieser Text das Bild im jeweiligen Zusammenhang sinnvoll beschreibt.
Auch die logische Bedienung eines Checkouts, die Verständlichkeit einer Fehlermeldung oder die Qualität einer Überschriftenstruktur muss manuell geprüft werden.
Ein bestandener automatischer Test beweist deshalb keine vollständige WCAG-Konformität.
Quellen: World Wide Web Consortium, Web Accessibility Initiative, Selecting Web Accessibility Evaluation Tools und How to Meet WCAG – Quick Reference. Das W3C beschreibt automatische Werkzeuge als Unterstützung der Evaluation, nicht als vollständigen Ersatz für menschliche Prüfungen. (W3C)
Die WCAG betreffen das gesamte Unternehmen
Barrierefreiheit ist keine reine Aufgabe der Entwicklung.
Viele Kriterien betreffen unterschiedliche Teams.
Design
Das Design beeinflusst unter anderem:
Farbkontraste,
Fokusmarkierungen,
Abstände,
Klickflächen,
Vergrößerbarkeit,
verständliche Zustände,
konsistente Komponenten.
Entwicklung
Die Entwicklung ist verantwortlich für:
semantisches HTML,
Tastaturbedienung,
Fokussteuerung,
zugängliche Formulare,
Statusmeldungen,
robuste Komponenten,
korrekte Schnittstellen zu assistiven Technologien.
Redaktion und Content
Redaktionelle Teams beeinflussen:
Alternativtexte,
Überschriften,
Linktexte,
Produktbeschreibungen,
Video-Untertitel,
verständliche Anweisungen,
Fehlermeldungen.
Produktmanagement
Das Produktmanagement bestimmt:
Anforderungen,
Prioritäten,
Prozesse,
Ressourcen,
Akzeptanzkriterien,
die Integration in Qualitätssicherung und Weiterentwicklung.
Barrierefreiheit funktioniert am besten, wenn sie nicht erst vor dem Veröffentlichungstermin geprüft wird. Sie sollte bereits in Konzeption, Design und Entwicklung berücksichtigt werden.
Warum einzelne WCAG-Kriterien eigene Beiträge verdienen
Die kurzen Bezeichnungen der WCAG sind nicht immer selbsterklärend.
Hinter einem Kriterium wie „Name, Rolle, Wert“ oder „Information und Beziehungen“ stehen zahlreiche Fragen für Design, Entwicklung und Content.
Deshalb werden wir die einzelnen Kriterien in dieser Artikelserie genauer betrachten.
Jeder Beitrag soll erklären:
Was verlangt das Kriterium?
Welche Menschen profitieren davon?
Wie zeigt sich das Problem in einem Online-Shop?
Welche typischen Fehler treten auf?
Wie kann die Anforderung umgesetzt werden?
Wie lässt sie sich testen?
Welche automatischen und manuellen Prüfungen sind möglich?
So entsteht mit der Zeit eine verständliche Wissenssammlung zu den WCAG – mit einem besonderen Fokus auf E-Commerce und digitale Produkte.
Unsere WCAG- und Accessibility-Audits
Die WCAG bilden eine wichtige Grundlage unserer Accessibility-Audits.
Wir prüfen nicht nur, ob einzelne technische Anforderungen formal erfüllt sind. Wir untersuchen auch, wie sich Barrieren auf reale Menschen und vollständige Kaufprozesse auswirken.
Unsere Angebote reichen von einer ersten Bedarfsanalyse bis zu einem tiefgreifenden Audit.
Je nach Umfang verbinden wir:
automatisierte Prüfungen,
manuelle WCAG-Tests,
Tastaturprüfungen,
Screenreader-Tests,
die Untersuchung vollständiger User Journeys,
eine Bewertung der semantischen Struktur,
eine Priorisierung nach Auswirkung und Dringlichkeit,
konkrete Empfehlungen zur Behebung.
Auf Wunsch erweitern wir den Audit durch Tests mit Menschen mit Behinderungen oder verbinden ihn mit einem UX-Audit.
Das Ergebnis ist keine reine Checkliste. Sie erhalten eine verständliche und umsetzbare Grundlage für Design, Entwicklung, Content und Produktmanagement.
Fazit: Die WCAG machen Barrierefreiheit überprüfbar
Die WCAG übersetzen das große Ziel der digitalen Barrierefreiheit in konkrete, überprüfbare Anforderungen.
Ihre vier Prinzipien bieten eine gute Orientierung:
Inhalte müssen wahrnehmbar sein.
Funktionen müssen bedienbar sein.
Informationen und Abläufe müssen verständlich sein.
Die technische Umsetzung muss robust sein.
Für Online-Shops betreffen diese Anforderungen den gesamten Kaufprozess.
Die WCAG sind deshalb nicht nur eine Aufgabe für einzelne Entwicklerinnen und Entwickler. Sie sind eine gemeinsame Grundlage für Design, Entwicklung, Content, UX und Produktmanagement.
In den nächsten Beiträgen dieser Reihe betrachten wir die einzelnen WCAG-Erfolgskriterien genauer und zeigen, was sie konkret für Online-Shops bedeuten.
