WCAG einfach erklärt

Kristin RuhsSEO-Expertin

Zuletzt aktualisiert: 24. Oktober 2024

Die Web Content Accessibility Guidelines wurden vom World Wide Web Consortium (W3C) entwickelt und bilden das zentrale Regelwerk für barrierefreies Webdesign.

Die Regeln der derzeit gültigen WCAG 2.1 (Stand Oktober 2024) sind pyramidenartig aufgebaut, wie in folgender Grafik ersichtlich:

Regeln der WCAG 2.1

Wesentliche Bestandteile der Web Content Accessibility Guidelines sind:

1. 4 Prinzipien – Die Grundlage der WCAG:
   • Wahrnehmbarkeit: Inhalte müssen für alle relevanten Sinne (Sehen, Hören und Tasten) zugänglich sein. Dies schließt Textalternativen für Bilder und Videos sowie eine klare Strukturierung der Inhalte ein.
   • Bedienbarkeit: Alle Funktionen und Inhalte müssen bedienbar sein, z. B. durch Tastatur- oder Sprachsteuerung.
   • Verständlichkeit: Die Benutzeroberfläche und Inhalte müssen leicht verständlich sein.
   • Robustheit: Inhalte müssen mit verschiedenen Systemen kompatibel sein und auch bei neuen technischen Entwicklungen korrekt angezeigt werden.
2. 13 Richtlinien: Sie konkretisieren die Prinzipien und helfen dabei, diese umzusetzen. Zum Beispiel gehört „Verwende Textalternativen für Bilder“ zum Prinzip Wahrnehmbarkeit. Eine Liste aller Richtlinien findest Du auf der Seite der Bundesregierung zur Informationstechnik.
3. 78 Erfolgskriterien: Dies sind messbare Regeln, die zeigen, ob die Richtlinien erfüllt sind. Sie sind in die Stufen A, AA und AAA unterteilt. Beispiele für diese messbaren Erfolgskriterien sind unter anderem:
   • Kontrast (Minimum) (gehört zu Stufe AA): Text und Hintergrundfarben müssen ein Kontrastverhältnis von mindestens 4,5:1 haben.
   • Tastaturbedienung (gehört zur Stufe A): Alle Funktionen müssen vollständig mit der Tastatur bedienbar sein, ohne Mausnutzung.

Ziel dieser Regeln ist es, dass auch Menschen mit sensorischen und motorischen (und in gewissem Rahmen mentalen) Einschränkungen die angebotenen Informationen erfassen und notwendige Eingaben tätigen können.

WCAG-Konformitätsstufen: A, AA und AAA

Die Art und Anzahl der erfüllten 78 Erfolgskriterien entscheidet über die Konformitätsstufe (A, AA oder AAA), den die jeweilige Website erreicht.

1. Stufe A: Diese Stufe enthält die Mindestanforderungen an Barrierefreiheit. Die meisten Websites sollten zumindest diese Anforderungen erfüllen.

1. Stufe AA: Diese Stufe umfasst zusätzliche Anforderungen und gilt als Standard, um eine gute Barrierefreiheit zu gewährleisten. Die meisten gesetzlichen Vorgaben beziehen sich auf diese Stufe.
2. Stufe AAA: Diese höchste Stufe umfasst alle Kriterien der Barrierefreiheit, ist jedoch oft nur schwer vollständig umsetzbar.

Übersicht über die WCAG Regeln: In den verschiedenen Versionen gab es Änderungen an den Kriterien.

Müssen Websitebetreiber die Richtlinien einhalten?

Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Unternehmen in der EU ab dem 28. Juni 2025 dazu, ihre digitalen Angebote barrierefrei zu gestalten. Dies gilt für Websites, Online  Shops, Software, Apps und andere digitale Angebote. Produkte und Dienstleistungen, die vor diesem Datum bereits angeboten wurden, haben eine Übergangsfrist bis 2030.

Unternehmen müssen dann die Konformitätsstufe AA der WCAG erfüllen. Das bedeutet, dass Websites und digitale Angebote mindestens die Anforderungen der Stufe A und AA einhalten müssen, um als barrierefrei zu gelten. Die Stufe AAA ist nicht verpflichtend, da ihre Kriterien schwer vollständig umzusetzen sind und oft nur auf spezifische Situationen angewendet werden können.

Wer als barrierefrei zertifiziert werden möchte, kann den kostenpflichtigen BIK BITV-Test beantragen und muss diesen ohne Beanstandung bestehen.

Warum sind die WCAG für Websites so wichtig?

Die Einhaltung der WCAG ist entscheidend, um die Barrierefreiheit und Nutzerfreundlichkeit Deiner Website zu gewährleisten. Eine barrierefreie Website bringt mehrere Vorteile:

1. Rechtliche Sicherheit: Ab dem 28. Juni 2025 wird in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG) wirksam. Es verpflichtet Unternehmen zur Barrierefreiheit ihrer digitalen Angebote.
2. Bessere Benutzererfahrung: Websites, die den WCAG-Richtlinien folgen, bieten eine benutzerfreundliche und inklusive Umgebung für alle Nutzer.
3. Verbessertes SEO-Ranking: Barrierefreie Websites sind auch für Suchmaschinen leichter zu indexieren, was sich positiv auf das Ranking auswirkt.
4. Erhöhte Konversionsraten: Eine gut strukturierte und leicht navigierbare Website kann zu höheren Konversionsraten führen, da Informationen und Produkte schneller gefunden werden.
5. Wettbewerbsvorteil: Barrierefreie Websites können sich von der Konkurrenz abheben und als fortschrittlich und inklusiv wahrgenommen werden.

Praktische Tipps: Vermeide häufige Barrieren

Häufige Barrieren sind zum Beispiel fehlende Alt-Attribute, blinkende Animationen oder eine komplexe Navigation. Die Vermeidung dieser Faktoren kann sich auch positiv auf die Suchmaschinenoptimierung bzw. das Ranking der Website auswirken, da die WCAG die Nutzererfahrung verbessert.

Suchmaschinen wie Google berücksichtigen beispielsweise gut strukturierte Inhalte, semantisch korrekte HTML-Tags und eine saubere Codierung. Diese Elemente fördern also nicht nur die Barrierefreiheit, sondern helfen auch Suchmaschinen-Crawlern, die Inhalte besser zu verstehen.

1. Optimierte HTML-Struktur: Barrierefreie Websites nutzen saubere HTML-Strukturen, die sowohl von Suchmaschinen als auch von Screenreadern leicht interpretiert werden können.
2. Textalternativen und Meta-Daten: Die Verwendung von Alternativtexten für Bilder und aussagekräftigen Meta-Daten verbessert die Sichtbarkeit in den Suchergebnissen.
3. Verbesserte Mobilfreundlichkeit: Viele WCAG-Anforderungen überschneiden sich mit den Kriterien für mobile Optimierung, wodurch die Anpassungen sich auch positiv auf das Ranking auswirken können.

1. Maßnahmen zur Optimierung der Barrierefreiheit gemäß den WCAG: Nutze Tags wie <h1>, <h2>, <h3> usw., um die Inhalte klar zu strukturieren. Achte außerdem auf eine übersichtliche Navigation, die nicht nur mit der Maus, sondern auch über die Tastatur bedienbar ist.
2. Korrekte Farbkontraste: Achte darauf, dass der Kontrast zwischen Text und Hintergrund ausreichend hoch ist (mindestens 4,5:1 für normalen Text). Menschen mit Sehbehinderungen oder Farbfehlsichtigkeit haben Schwierigkeiten, Texte zu lesen, wenn die Kontraste zu schwach sind (z.B. hellgrauer Text auf weißem Hintergrund).
3. Navigation und Formulare anpassen: Alle interaktiven Elemente wie Formulare, Buttons oder Links sollten per Tastatur zugänglich sein. Ohne korrekt ausgezeichnete Labels und Tastaturnavigation sind Formulare schwer bedienbar. Auch Links wie „hier klicken“ geben keinen Aufschluss über das Ziel, was für Nutzer mit Screenreadern problematisch ist.
4. Überprüfung durch Test-Tools: Nutze Tools wie das WAVE Web Accessibility Evaluation Tool oder Google Lighthouse, um Deine Website auf Barrierefreiheit zu testen und Verbesserungspotenzial zu erkennen.
5. Vermeide Animationen und bewegte Inhalte: Inhalte, die blinken oder flackern, können Anfälle bei Epilepsie auslösen. Zudem sollten solche Animationen jederzeit vom Nutzer deaktiviert werden können.

Weiterführende Links:

• Das Barrierefreiheitsstärkungsgesetz (BFSG) – Bundesfachstelle Barrierefreiheit
• Web Content Accessibility Guidelines 2.1 (WCAG 2.1)
• Barrierefreie Websites: Internet für Alle!