Ueber eine Milliarde Menschen weltweit leben mit einer Form von Behinderung. Das entspricht etwa 15 % der Weltbevoelkerung. Darunter sind Menschen, die blind sind oder eine Sehbeeintraechtigung haben, Menschen, die gehoerlos oder schwerhoerig sind, Menschen mit motorischen Einschraenkungen, kognitiven Unterschieden oder voruebergehenden Beeintraechtigungen wie einem gebrochenen Arm oder einer Migraene.
Wenn wir Websites erstellen, ohne diese Realitaeten zu beruecksichtigen, machen wir die Dinge nicht nur unbequem. Wir sperren Menschen von Informationen, Dienstleistungen und Moeglichkeiten aus, die andere als selbstverstaendlich betrachten. Barrierefreiheit ist kein Feature. Sie ist eine Verantwortung.
Was Web-Barrierefreiheit bedeutet
Web-Barrierefreiheit bedeutet, Websites so zu gestalten und zu entwickeln, dass Menschen mit Behinderungen sie wahrnehmen, verstehen, navigieren und mit ihnen interagieren koennen. Es bedeutet auch, dass sie zum Web beitragen koennen.
Dies geht ueber Screenreader hinaus. Barrierefreiheit umfasst:
- Visuell: Blindheit, Sehschwaeche, Farbenblindheit
- Auditiv: Taubheit, Schwerhoeigkeit
- Motorisch: eingeschraenkte Feinmotorik, Zittern, Laehmung
- Kognitiv: Legasthenie, ADHS, Gedaechtnisschwierigkeiten, Lernschwierigkeiten
- Temporaer und situationsbedingt: ein gebrochenes Handgelenk, helles Sonnenlicht auf dem Bildschirm, eine laute Umgebung, langsames Internet
Die wichtigste Erkenntnis ist, dass barrierefreies Design allen zugutekommt. Untertitel helfen in einer lauten Umgebung. Hoher Kontrast hilft bei hellem Licht. Tastaturnavigation hilft Power-Usern. Klare Sprache hilft Nicht-Muttersprachlern. Barrierefreiheit ist kein Sondermodus — es ist gutes Design.
Der WCAG-Standard
Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard fuer Web-Barrierefreiheit, veroeffentlicht vom W3C. Die aktuelle Version ist WCAG 2.2, organisiert nach vier Prinzipien, bekannt unter dem Akronym POUR:
Wahrnehmbar (Perceivable)
Informationen muessen so dargestellt werden, dass alle Benutzer sie wahrnehmen koennen.
- Textalternativen: Jedes Bild benoetigt ein
alt-Attribut, das seinen Inhalt beschreibt. Dekorative Bilder verwendenalt="". - Untertitel und Transkripte: Videoinhalte benoetigen Untertitel; Audioinhalte benoetigen Transkripte.
- Anpassbare Struktur: Der Inhalt sollte auch ohne Styles Sinn ergeben. Verwenden Sie semantisches HTML (
<h1>,<nav>,<main>,<article>), nicht nur visuelles Styling. - Unterscheidbarer Inhalt: ausreichender Farbkontrast, skalierbare Schrift, keine Information nur durch Farbe vermittelt.
Bedienbar (Operable)
Benutzer muessen die Oberflaeche bedienen koennen.
- Tastaturbedienbar: Jedes interaktive Element muss mit der Tastatur allein erreichbar und bedienbar sein. Keine Mausfallen.
- Ausreichend Zeit: Wenn Inhalte Zeitlimits haben, muessen Benutzer diese verlaengern oder deaktivieren koennen.
- Keine Anfallsausloeser: Vermeiden Sie Inhalte, die mehr als dreimal pro Sekunde blinken.
- Navigierbar: klare Seitentitel, logische Ueberschriftenstruktur, Sprungnavigation, sichtbare Fokusindikatoren.
Verstaendlich (Understandable)
Inhalt und Oberflaeche muessen verstaendlich sein.
- Lesbarer Text: Geben Sie die Seitensprache an (
lang-Attribut). Verwenden Sie moeglichst klare, einfache Sprache. - Vorhersagbares Verhalten: Die Navigation sollte konsistent sein. Seiten sollten den Kontext nicht unerwartet aendern.
- Eingabehilfe: Formularfelder klar beschriften. Hilfreiche Fehlermeldungen bereitstellen, die erklaeren, was schiefgelaufen ist und wie man es behebt.
Robust (Robust)
Inhalte muessen robust genug sein, um mit aktuellen und zukuenftigen Technologien zu funktionieren.
- Valides HTML: korrekte semantische Auszeichnung, die von assistiven Technologien zuverlaessig interpretiert werden kann.
- Name, Rolle, Wert: Benutzerdefinierte Komponenten muessen ihren Zweck gegenueber Barrierefreiheits-APIs offenlegen (bei Bedarf ueber ARIA).
Konformitaetsstufen
WCAG definiert drei Stufen:
| Stufe | Bedeutung | Beispiel |
|---|---|---|
| A | Minimale Barrierefreiheit | Bilder haben Alt-Text, Seiten haben Titel |
| AA | Standard-Ziel fuer die meisten Websites | Farbkontrast von mindestens 4,5:1 fuer normalen Text |
| AAA | Hoechste Stufe, nicht immer erreichbar | Kontrastverhhaeltnis von 7:1, Gebaerdensprache fuer alle Videos |
Die meisten Gesetze weltweit verlangen die Einhaltung von Stufe AA. Dies ist die Stufe, die Sie anstreben sollten.
Haeufige Barrieren und wie man sie behebt
Fehlender Alt-Text bei Bildern
Das Problem: Screenreader-Nutzer hoeren nur „Bild" oder gar nichts.
Die Loesung: Fuegen Sie jedem informativen Bild einen beschreibenden alt-Text hinzu. Fuer dekorative Bilder verwenden Sie alt="", damit Screenreader sie ueberspringen.
<!-- Gut -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Dekorativ -->
<img src="divider.svg" alt="" />
Unzureichender Farbkontrast
Das Problem: Menschen mit Sehschwaeche oder Farbenblindheit koennen den Text nicht lesen.
Die Loesung: Stellen Sie ein minimales Kontrastverhhaeltnis von 4,5:1 fuer normalen Text und 3:1 fuer grossen Text (18px+ oder 14px fett) sicher. Verwenden Sie ein Kontrastpruefungstool, um Ihre Farbkombinationen zu ueberpruefen.
Sie koennen Ihren Farbkontrast jetzt direkt mit unserem Kontrastpruefungstool ueberpruefen. Es zeigt sofort die WCAG-AA- und AAA-Ergebnisse an.
Fehlende Formularbeschriftungen
Das Problem: Screenreader-Nutzer wissen nicht, wofuer ein Formularfeld ist.
Die Loesung: Jede Eingabe benoetigt ein sichtbares <label>-Element, das ueber das for-Attribut verknuepft ist.
<!-- Gut -->
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" />
<!-- Schlecht: Platzhalter ist kein Label -->
<input type="email" placeholder="E-Mail-Adresse" />
Keine Tastaturnavigation
Das Problem: Benutzer, die keine Maus verwenden koennen, kommen nicht weiter.
Die Loesung: Verwenden Sie native HTML-Elemente (<button>, <a>, <select>), die standardmaessig tastaturbedienbar sind. Wenn Sie benutzerdefinierte Komponenten erstellen, stellen Sie sicher, dass sie fokussierbar sind und auf Tastaturereignisse reagieren. Entfernen Sie niemals Fokusumrisse, ohne eine Alternative bereitzustellen.
Fehlende Seitenstruktur
Das Problem: Screenreader-Nutzer koennen nicht effizient navigieren.
Die Loesung: Verwenden Sie semantisches HTML. Ein <h1> pro Seite, logische Ueberschriftenhierarchie (keine Ebenen ueberspringen), Landmarks (<nav>, <main>, <footer>).
Automatisch abspielende Medien
Das Problem: Unerwarteter Ton stoert Screenreader-Nutzer. Automatisch abspielende Videos koennen Anfaelle ausloesen oder Stress verursachen.
Die Loesung: Spielen Sie niemals automatisch Audio ab. Wenn Videos automatisch abgespielt werden, stellen Sie sicher, dass sie standardmaessig keinen Ton haben und Pausensteuerungen bieten.
Farbe allein reicht nicht
Verlassen Sie sich niemals nur auf Farbe, um Informationen zu vermitteln. Bedenken Sie:
- Ein Formularfeld mit rotem Rahmen fuer Fehler benoetigt auch ein Fehlersymbol oder eine Textnachricht
- Ein Diagramm mit farbigen Linien benoetigt auch Muster, Beschriftungen oder eine Legende
- Ein Link im Fliesstext benoetigt eine Unterstreichung oder einen anderen visuellen Hinweis, nicht nur eine Farbveraenderung
Etwa 8 % der Maenner und 0,5 % der Frauen haben eine Form von Farbsehschwaeche. Design mit diesem Wissen ist kein Randfall — es ist grundlegende Inklusion.
Barrierefreiheit testen
Automatisiertes Testen
Automatisierte Tools erkennen etwa 30-40 % der Barrierefreiheitsprobleme. Sie sind ein guter erster Schritt, aber keine vollstaendige Loesung.
- axe DevTools (Browser-Erweiterung) — scannt eine Seite und meldet WCAG-Verstoesse
- Lighthouse (in Chrome DevTools integriert) — enthaelt ein Barrierefreiheits-Audit
- WAVE (webbasiertes Tool) — visuelles Overlay mit Problemanzeige
Manuelles Testen
Viele Barrierefreiheitsprobleme erfordern menschliches Urteilsvermoegen:
- Tastaturtests: Trennen Sie Ihre Maus ab und navigieren Sie Ihre gesamte Website mit Tab, Enter, Escape und Pfeiltasten. Koennen Sie alles erreichen? Ist die Fokusreihenfolge logisch?
- Screenreader-Tests: Probieren Sie VoiceOver (Mac), NVDA (Windows, kostenlos) oder TalkBack (Android). Ergibt der Inhalt Sinn, wenn er vorgelesen wird?
- Zoom-Tests: Zoomen Sie Ihren Browser auf 200 %. Funktioniert das Layout noch? Wird Inhalt abgeschnitten oder ueberlappt?
- Reduzierte Bewegung: Aktivieren Sie „Bewegung reduzieren" in Ihren Betriebssystemeinstellungen. Respektieren Animationen diese Einstellung?
Benutzertests
Das wertvollste Feedback kommt von Menschen, die assistive Technologien in ihrem Alltag tatsaechlich nutzen. Wenn Ihr Budget es erlaubt, beziehen Sie Menschen mit Behinderungen in Ihren Testprozess ein.
Barrierefreiheit ist ein Spektrum, kein Kontrollkaestchen
Barrierefreiheit ist kein einmaliges Projekt mit einer Ziellinie. Sie ist eine fortlaufende Praxis. Websites aendern sich, Inhalte werden hinzugefuegt, und neue Barrieren koennen bei jedem Update auftreten.
Das Ziel ist nicht Perfektion. Das Ziel ist kontinuierliche Verbesserung und echte Ruecksichtnahme auf die Menschen, die das nutzen, was Sie bauen. Beginnen Sie mit den wirkungsvollsten Aenderungen — Farbkontrast, Alt-Text, Tastaturnavigation, Formularbeschriftungen — und bauen Sie darauf auf.
Jede Barriere, die Sie beseitigen, ist eine Tuer, die Sie oeffnen.
Schnellcheckliste
- Alle Bilder haben aussagekraeftigen
alt-Text (oderalt=""wenn dekorativ) - Farbkontrast erfuellt WCAG AA (4,5:1 fuer Text, 3:1 fuer grossen Text)
- Alle Formularfelder haben sichtbare Beschriftungen
- Die Website ist vollstaendig per Tastatur navigierbar
- Ueberschriften folgen einer logischen Hierarchie
- Fokusindikatoren sind sichtbar
- Seitensprache ist gesetzt (
lang-Attribut auf<html>) - Keine Information wird nur durch Farbe vermittelt
- Videos haben Untertitel
- Animationen respektieren
prefers-reduced-motion