WCAG (Web Content Accessibility Guidelines) sind die internationalen Richtlinien für digitale Barrierefreiheit. Sie definieren, wie Websites und Webanwendungen gestaltet sein müssen, damit sie von allen Menschen genutzt werden können – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen.
Die vier WCAG-Prinzipien (POUR)
Wahrnehmbar (Perceivable)
Inhalte müssen über verschiedene Sinne wahrnehmbar sein. Bilder brauchen Alternativtexte, Videos brauchen Untertitel, und Informationen dürfen nicht nur über Farbe vermittelt werden.
Bedienbar (Operable)
Alle Funktionen müssen per Tastatur bedienbar sein. Navigationselemente brauchen ausreichende Klickflächen (mindestens 44x44px). Animationen müssen pausierbar sein.
Verständlich (Understandable)
Texte müssen klar formuliert sein. Formulare brauchen verständliche Labels und Fehlermeldungen. Die Navigation muss konsistent und vorhersehbar sein.
Robust (Robust)
Inhalte müssen von verschiedenen Technologien interpretiert werden können – von modernen Browsern bis zu assistiven Technologien wie Screen Readern.
WCAG-Konformitätsstufen
- Stufe A: Grundlegende Barrierefreiheit (Mindeststandard)
- Stufe AA: Empfohlener Standard, gesetzlich meist gefordert
- Stufe AAA: Höchster Standard, für spezielle Anforderungen
Konkrete Anforderungen
Farbkontraste
Text muss einen Mindestkontrast von 4.5:1 zum Hintergrund haben (normaler Text) bzw. 3:1 (großer Text). Im Dark Mode gelten dieselben Anforderungen.
Tastaturnavigation
Jedes interaktive Element – Links, Buttons, Formulare, Hamburger-Menüs – muss per Tastatur erreichbar und bedienbar sein. Der Fokuszustand muss visuell erkennbar sein.
Alternativtexte
Bilder und SVGs brauchen beschreibende alt-Texte. Dekorative Bilder werden mit alt="" oder aria-hidden="true" markiert.
Semantisches HTML
Korrekte HTML-Elemente (<nav>, <main>, <article>, <button>) statt generischer <div>-Elemente. ARIA-Attribute ergänzen, wo nötig.
Bewegungsreduzierung
Die Media Query prefers-reduced-motion muss für Microinteractions und Parallax-Effekte respektiert werden.
BFSG und European Accessibility Act
Ab Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) auch private Unternehmen in Deutschland zu digitaler Barrierefreiheit. E-Commerce-Websites, Bankdienstleistungen und Messenger müssen WCAG 2.1 Level AA erfüllen.
Tools für Barrierefreiheit
- axe DevTools: Browser-Extension für automatisierte Accessibility-Tests
- Lighthouse: Googles Audit-Tool prüft Barrierefreiheit
- WAVE: Visueller Accessibility-Checker
- Screen Reader: VoiceOver (Mac/iOS), NVDA (Windows) für manuelle Tests
Für professionelles Webdesign ist Barrierefreiheit keine optionale Zusatzleistung, sondern eine ethische und zunehmend rechtliche Verpflichtung – und ein Qualitätsmerkmal, das allen Nutzern zugutekommt.