Barrierefreiheit im Web

Web-Barrierefreiheit (englisch: Web Accessibility) bedeutet, dass digitale Inhalte und Anwendungen von allen Menschen nutzbar sind – unabhängig von körperlichen oder kognitiven Einschränkungen, dem verwendeten Gerät oder der Internetverbindung.

Weltweit leben 1,3 Milliarden Menschen mit einer Behinderung (WHO, 2023). Im digitalen Kontext sind das Nutzer, die auf Screenreader angewiesen sind, Websites per Tastatur steuern, Bilder nicht sehen können oder von Texten auf alternativer Wahrnehmungsebene abhängig sind. Eine nicht barrierefreie Website schließt diese Nutzer aus – und verletzt ab 2025 in vielen Fällen geltendes EU-Recht.

Die WCAG: Der internationale Standard

Die Web Content Accessibility Guidelines (WCAG) des W3C sind der weltweit anerkannte Referenzstandard für barrierefreie Web-Inhalte. WCAG 2.2, veröffentlicht im Oktober 2023, ist die aktuelle Fassung.

Die drei Konformitätsstufen

Für die meisten Projekte gilt: WCAG 2.1 Level AA ist das realistische und gesetzlich geforderte Ziel.

Neue Kriterien in WCAG 2.2

WCAG 2.2 fügte 9 neue Erfolgskriterien hinzu, darunter:

• 2.4.11 Focus Not Obscured (AA): Fokussierte UI-Elemente dürfen nicht vollständig von anderen Elementen verdeckt werden
• 2.5.7 Dragging Movements (AA): Drag-Aktionen müssen auch per Einzelklick/Zeigegerät erreichbar sein
• 3.2.6 Consistent Help (A): Hilfe-Elemente (Live-Chat, Support) müssen konsistent positioniert sein

Die 4 POUR-Prinzipien

WCAG basiert auf vier Grundprinzipien, bekannt als POUR:

1. Wahrnehmbar (Perceivable)

Informationen und UI-Komponenten müssen so präsentiert werden, dass Nutzer sie wahrnehmen können.

Wichtigste Kriterien:

• 1.1.1 Alt-Texte: Alle Nicht-Text-Inhalte (Bilder, Icons) brauchen Textalternativen
• 1.3.1 Informationen und Beziehungen: Struktur muss programmatisch erkennbar sein (semantisches HTML)
• 1.4.3 Kontrastverhältnis: Normaler Text mindestens 4,5:1, großer Text mindestens 3:1
• 1.4.4 Textgröße: Text muss auf 200 % skalierbar sein ohne Funktionsverlust

2. Bedienbar (Operable)

Alle UI-Komponenten und die Navigation müssen bedienbar sein.

Wichtigste Kriterien:

• 2.1.1 Tastaturzugänglichkeit: Alle Funktionen per Tastatur nutzbar
• 2.1.2 Keine Tastaturfalle: Nutzer dürfen nicht in einer Komponente gefangen sein
• 2.4.3 Fokus-Reihenfolge: Tab-Reihenfolge muss logisch und inhaltlich sinnvoll sein
• 2.4.7 Sichtbarer Fokus: Tastaturfokus muss für Nutzer sichtbar sein

3. Verständlich (Understandable)

Inhalte und Bedienung der UI müssen verständlich sein.

Wichtigste Kriterien:

• 3.1.1 Sprache der Seite: Seitensprache im HTML-Attribut korrekt deklariert
• 3.3.1 Fehlererkennung: Bei Formularfehlern muss der betroffene Bereich identifiziert und der Fehler beschrieben werden
• 3.3.2 Labels: Alle Formularelemente brauchen sichtbare Labels

4. Robust (Robust)

Inhalte müssen von einer Vielzahl von Nutzerprogrammen (inklusive assistiver Technologien) interpretiert werden können.

Wichtigste Kriterien:

• 4.1.1 Parsing: HTML muss valide sein
• 4.1.2 Name, Rolle, Wert: Alle UI-Komponenten müssen programmatisch korrekte Rollen und Zustände haben

Häufige Barrieren und ihre Lösungen

Rechtliche Anforderungen in der EU (2025)

Public Sector: EU-Richtlinie 2016/2102

Öffentliche Stellen (Behörden, staatliche Institutionen) sind seit 2018/2020 zur WCAG 2.1 AA verpflichtet. Das gilt für Websites und mobile Anwendungen.

Private Unternehmen: European Accessibility Act (EAA)

Ab dem 28. Juni 2025 gilt der European Accessibility Act für private Unternehmen. In Deutschland wurde er durch das Barrierefreiheitsstärkungsgesetz (BFSG) umgesetzt.

Betroffen sind Unternehmen mit mehr als 10 Mitarbeitern oder über 2 Mio. Euro Jahresumsatz, die folgende Dienstleistungen anbieten:

• E-Commerce (Online-Shops)
• Banking und Finanzdienstleistungen
• Telekommunikation
• Audiovisuelle Medien und Streaming
• E-Books und Lesegeräte

Konsequenzen bei Nicht-Erfüllung: Bußgelder bis 100.000 Euro sowie Abmahnungen durch Verbraucherschutzverbände.

Barrierefreiheits-Tools im Überblick

Automatisierte Prüftools

Wichtig: Automatisierte Tools decken nur ca. 30–40 % aller WCAG-Probleme ab. Manuelle Prüfung durch echte Nutzer oder Experten ist unerlässlich.

Manuelle Test-Methoden

• Tastaturtest: Alle Seiten ausschließlich per Tab und Pfeiltasten navigieren
• Screenreader-Test: NVDA (Windows, kostenlos), VoiceOver (macOS/iOS), TalkBack (Android)
• Zoom-Test: Browser auf 200 % zoomen – bricht das Layout?
• Kontrastcheck: Colour Contrast Analyser (TPGi) für genaue Verhältnismessungen

Barrierefreiheit und SEO: Synergie statt Konflikt

Barrierefreiheit und SEO optimieren für dieselbe Grundlage: verständliche, strukturierte, zugängliche Inhalte.

Gemeinsame Vorteile:

• Alt-Texte verbessern Bild-SEO und Screen-Reader-Zugänglichkeit gleichzeitig
• Semantisches HTML (H1–H6, <nav>, <article>) hilft Googles Crawler und Screenreadern
• Lesbare Kontraste senken die Absprungrate – ein indirekter Ranking-Faktor
• Klare Linkbeschreibungen ("Mehr über Webdesign erfahren" statt "Hier klicken") verbessern Ankertexte und Screenreader-Navigation
• Schnelle Ladezeiten sind sowohl Barrierefreiheits- als auch Core-Web-Vitals-Anforderung

Wer für Webdesign und UX Design ganzheitlich denkt, implementiert Barrierefreiheit von Beginn an – nicht als Compliance-Overhead, sondern als Qualitätsmerkmal.

Implementierung in der Praxis: Prioritätenreihenfolge

Für ein pragmatisches Vorgehen empfehlen Experten folgende Reihenfolge:

1. Strukturfehler beheben (fehlendes lang-Attribut, nicht-semantisches HTML)
2. Kontraste korrigieren (größter visueller Impact, schnell lösbar)
3. Alt-Texte ergänzen (für alle Bilder mit Informationsgehalt)
4. Tastaturnavigation sicherstellen (Tab-Reihenfolge, Fokus-Sichtbarkeit)
5. Formulare labeln (alle Felder mit <label>)
6. Videos untertiteln (Captions für alle Video-Inhalte)
7. ARIA ergänzen (nur dort, wo semantisches HTML nicht ausreicht)