Die Web Content Accessibility Guidelines (WCAG) bieten Webentwickler*innen einen international anerkannten Standard, um digitale Inhalte so zu gestalten, dass sie für alle Menschen zugänglich sind – unabhängig von individuellen Einschränkungen.
Was ist WCAG?
Die Web Content Accessibility Guidelines (WCAG) wurden vom World Wide Web Consortium (W3C) entwickelt und dienen als Grundlage für die barrierefreie Gestaltung von Webinhalten. Ziel ist es, Websites so zu konzipieren, dass sie auch von Menschen mit Behinderungen genutzt werden können (etwa bei Seh-, Hör-, Bewegungs- oder kognitiven Einschränkungen).
WCAG-Versionen und gesetzliche Anforderungen
Während die ursprüngliche WCAG 2.0 lange der Standard war, sind für moderne Webprojekte die folgenden Versionen relevant:
- WCAG 2.1: Fügt Kriterien hinzu, die vor allem die Barrierefreiheit auf mobilen Endgeräten und für Personen mit kognitiven Einschränkungen verbessern.
- WCAG 2.2: Die aktuellste Hauptversion (Stand 2024), welche die Anforderungen nochmals erweitert und neue Kriterien, wie z. B. die fokusierbare Bedienung (Success Criterion 2.4.13), einführt.
In Österreich basieren die gesetzlichen Pflichten auf diesen Standards:
- Öffentliche Stellen: Müssen das Web-Zugänglichkeits-Gesetz (WZG) erfüllen, das sich auf WCAG 2.1 Level AA stützt.
- Private Unternehmen: Ab dem 28. Juni 2025 müssen bestimmte Produkte und Dienstleistungen (z. B. Online-Shops, E-Book-Reader, Bankdienstleistungen) das Barrierefreiheitsgesetz (BaFG) erfüllen (Umsetzung des Europäischen Rechtsakts zur Barrierefreiheit). Dieses Gesetz verweist ebenfalls auf die WCAG Level AA.
Um die gesetzlichen Anforderungen zu erfüllen und eine breite Zugänglichkeit zu gewährleisten, sollten Webseiten und Apps heute mindestens nach WCAG 2.1 Level AA oder idealerweise nach WCAG 2.2 Level AA umgesetzt werden.
Die Richtlinien basieren auf vier grundlegenden Prinzipien – bekannt als POUR:
| Prinzip | Beschreibung | Konkrete WCAG-Beispiele (WCAG 2.1/2.2) |
|---|---|---|
| Perceivable (Wahrnehmbar) | Inhalte und Informationen müssen so präsentiert werden, dass sie von Nutzern wahrgenommen werden können. | Stellen Sie Textalternativen für alle Nicht-Text-Inhalte (Bilder, Diagramme) bereit (alt-Text). Stellen Sie sicher, dass das Kontrastverhältnis zwischen Text und Hintergrund mindestens 4.5:1 beträgt. |
| Operable (Bedienbar) | Die Komponenten der Benutzeroberfläche und die Navigation müssen bedienbar sein. | Alle Funktionen der Website müssen vollständig über die Tastatur zugänglich sein. Der Fokusindikator (z. B. der Rahmen um ein aktives Element) muss stets sichtbar sein. |
| Understandable (Verständlich) | Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein. | Stellen Sie verständliche Formular-Labels und klare Anweisungen bereit. Geben Sie bei Eingabefehlern präzise Fehlermeldungen aus und schlagen Sie Korrekturen vor. |
| Robust (Robust) | Inhalte müssen robust genug sein, damit sie von einer großen Anzahl von Benutzeragenten (inklusive assistiver Technologien) zuverlässig interpretiert werden können. | Verwenden Sie sauberes, standardkonformes HTML/CSS. Setzen Sie ARIA-Attribute (Accessible Rich Internet Applications) dort ein, wo die native HTML-Semantik nicht ausreicht (z. B. bei komplexen Widgets wie Tabs oder Akkordeons). |
Konformitätsstufen der WCAG
Die WCAG 2.0 ist in drei Stufen unterteilt, die den Grad der Barrierefreiheit beschreiben:
Stufe A (Minimalanforderungen)
- Bietet grundlegende Barrierefreiheit.
- Stellt sicher, dass Inhalte zumindest grundsätzlich zugänglich sind.
- Beispiele: Alternativtexte für Bilder, keine rein per Maus bedienbaren Elemente.
- Keine spezifischen Anforderungen an Farbkontraste.
Stufe AA (Empfohlener Standard)
Diese Stufe deckt den Großteil der Lesbarkeit für Personen mit Seheinschränkungen ab.
- Erweiterte Anforderungen, gesetzlich häufig vorgeschrieben (z. B. für Behörden).
- Beispiele: Mindestkontrastverhältnis, sinnvolle Navigation per Tastatur, klare Fehlermeldungen bei Formularen.
- Anforderungen an Farbkontraste
- Normale Schriftgröße: mindestens 4,5:1
- Große Schriftgröße: mindestens 3:1
(„groß“ = mindestens 18pt normal oder 14pt fett)
Stufe AAA (Maximaler Standard)
Diese hohen Anforderungen gewährleisten Lesbarkeit auch bei starker Sehschwäche oder Kontrastempfindlichkeit.
- Sehr hohe Anforderungen, z. B. für spezielle Zielgruppen oder barrierefreie Leuchtturmprojekte.
- Beispiele: Kontrastverhältnis von 7:1, einfache Sprache, Gebärdensprachvideos.
- Normale Schriftgröße: mindestens 7:1
- Große Schriftgröße: mindestens 4,5:1
Zusatz
Grafiken, UI-Komponenten und Texte in Logos sind von diesen Werten ausgenommen, sofern keine alternative Darstellung notwendig ist.
Optimierungsschritte für eine barrierefreie Website
1. Analyse des Ist-Zustands
- Mit Tools wie WAVE oder axe erste Problembereiche identifizieren.
2. Semantisches HTML
- Strukturierte Seiten mit HTML5-Elementen (
<main>,<nav>,<section>, etc.). - Korrekte Beschriftung von Formularen und interaktiven Elementen.
3. Alternative Inhalte
- Alle Bilder benötigen sinnvolle
alt-Attribute. - Audiovisuelle Inhalte sollten durch Untertitel oder Transkripte ergänzt werden.
4. Tastaturnavigation gewährleisten
- Fokusindikatoren sichtbar machen (
:focus). - Navigation ohne Maus muss vollständig möglich sein.
5. Kontrast und Farben
- Mindestens Kontrastverhältnis 4.5:1 (für AA) zwischen Text und Hintergrund.
- Farben nicht als alleinige Informationsträger verwenden.
6. Responsive und skalierbares Layout
- Inhalte müssen ohne horizontales Scrollen oder Zoom-Verlust nutzbar bleiben.
7. ARIA-Rollen & States
- Unterstützend einsetzen, besonders bei komplexen UI-Komponenten.
8. Formular-Validierung & Fehlerhinweise
- Fehlermeldungen verständlich formulieren und barrierefrei präsentieren.
9. Klar verständliche Sprache
- Fachbegriffe erklären, einfache Satzstrukturen bevorzugen.
Tools zur Prüfung der WCAG-Konformität
Online-Tools
| Tool | Funktion |
|---|---|
| WAVE | Browser-basiertes Tool zur visuellen Analyse |
| axe DevTools | Erweiterung mit ausführlicher Fehlerbeschreibung |
| Google Lighthouse | Accessibility-Analyse in Chrome DevTools |
| Siteimprove Checker | Echtzeitprüfung im Browser |
| TANAGURU | Vollautomatisierte WCAG-Tests ganzer Seiten |
Offline- und Desktop-Tools
| Tool | Beschreibung |
|---|---|
| Accessibility Insights | Microsoft-Tool für Windows und Chrome |
| NVDA Screen Reader | Kostenlos, beliebt für Screenreader-Tests |
| JAWS | Branchenstandard für professionelle Screenreader-Tests |
| Color Oracle | Farbsinn-Simulation für Desktop |
Fazit
Die Umsetzung der WCAG 2.0 ist nicht nur eine technische Herausforderung, sondern auch ein gesellschaftlicher Auftrag. Gerade in Zeiten zunehmender Digitalisierung ist der barrierefreie Zugang zu Informationen ein wesentliches Qualitätsmerkmal. Mit dem richtigen Know-how, den passenden Tools und einer systematischen Herangehensweise lassen sich Websites nicht nur gesetzeskonform, sondern vor allem inklusive und zukunftssicher gestalten.
Anmerkung
Diese Optimierung ist förderbar (KMU.DIGITAL & GREEN).
Quellen und Literatur
WCAG W3C Recommendation ; W3C WAI Overview ; Understanding WCAG (Quickref) ; WebAIM.org ; MDN Web Docs – Accessibility ; The A11y Project ; Accessibility for Everyone – Laura Kalbag – ISBN: 978-1-937557-79-0; Inclusive Design Patterns – Heydon Pickering – ISBN: 978-3-945749-31-9; Barrierefreies Webdesign – Jan Eric Hellbusch – ISBN: 978-3-95982-259-1