Warum Barrierefreiheit mehr als Kontrast und Größe ist
Kontrast und Schriftgröße sind nur die Spitze des Eisbergs. Warum echte Barrierefreiheit bei Semantik, Tastatur und Verständlichkeit beginnt und am Ende allen zugutekommt.
Wer an Barrierefreiheit denkt, denkt meist an zwei Dinge: genug Kontrast und große Schrift. Beides ist wichtig, keine Frage. Wer Barrierefreiheit aber darauf reduziert, verpasst den größten Teil des Themas. Echte Barrierefreiheit beginnt dort, wo Design unsichtbar wird: in der Struktur, der Bedienbarkeit, der Verständlichkeit und in der Technik darunter.
Dabei ist Barrierefreiheit kein Nischenthema. Laut Statistischem Bundesamt lebten Ende 2025 gut 7,8 Millionen Menschen in Deutschland mit einer amtlich anerkannten schweren Behinderung, das sind 9,4 Prozent der Bevölkerung. Dazu kommen viele Menschen, die ohne anerkannte Behinderung im Alltag auf Barrieren stoßen. Dieser Artikel zeigt, was Barrierefreiheit wirklich ausmacht und warum sie am Ende allen zugutekommt.
Der Reflex: Kontrast und Größe
Es ist verständlich, warum ausgerechnet diese beiden Themen so präsent sind: Sie sind sichtbar, schnell prüfbar und lassen sich mit Tools messen. Ein Kontrastprüfer zeigt in Sekunden, ob ein Text den Mindestwert erreicht. Die Schriftgröße sieht man auf den ersten Blick.
Das Problem: Wer nur Kontrast und Größe optimiert, erfüllt vielleicht ein oder zwei Kriterien und lässt Dutzende weitere außen vor. Barrierefreiheit ist ein System, kein Einzelmaß. Wer das System versteht, baut bessere Websites.
Die vier Prinzipien der WCAG
Die WCAG (Web Content Accessibility Guidelines) sind der internationale Standard für barrierefreie Webinhalte, aktuell in der Version 2.2. Sie bauen auf vier Prinzipien auf, die weit über das Visuelle hinausgehen. Auf Englisch werden sie nach ihren Anfangsbuchstaben als POUR abgekürzt.
1. Wahrnehmbar (Perceivable)
Inhalte müssen über mehr als einen Sinn zugänglich sein. Kontrast und Schriftgröße gehören hierher, aber eben auch Alternativtexte für Bilder, Untertitel für Videos und eine sinnvolle Überschriftenstruktur. Wer Inhalte nur über einen einzigen Sinneskanal vermittelt, schließt Menschen aus.
2. Bedienbar (Operable)
Alles muss ohne Maus funktionieren: über Tastatur, Schalter, Augensteuerung oder Spracheingabe. Dazu gehören eine logische Tab-Reihenfolge, ein sichtbarer Fokus und ausreichend Zeit zum Lesen und Handeln.
3. Verständlich (Understandable)
Texte, Formulare und Abläufe müssen klar und vorhersehbar sein. Navigationselemente bleiben konsistent, Fehlermeldungen erklären, was schiefgelaufen ist und wie es weitergeht.
4. Robust (Robust)
Inhalte müssen mit aktuellen und künftigen Technologien funktionieren, vom Screenreader bis zum Sprachassistenten. Sauberes HTML und korrekt eingesetztes ARIA sind dafür die Grundlage.
Semantik: die unsichtbare Ordnung
Ein Screenreader liest keine hübschen Layouts, er liest Struktur. Überschriften-Hierarchien, Listen, Landmarks und korrekt ausgezeichnete Formulare sind für blinde Menschen das, was für Sehende das visuelle Raster ist: Orientierung.
Ein klassisches Beispiel: Ein Button, der nur als gestyltes <div> existiert, ist für viele assistive Technologien schlicht nicht vorhanden. Erst ein echtes <button>-Element oder die passende ARIA-Rolle samt Tastaturbedienung macht aus einem hübschen Klick-Element ein bedienbares.
Überschriften sind dabei besonders wichtig. Viele Menschen, die einen Screenreader nutzen, springen von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen, ähnlich wie Sehende eine Seite überfliegen. Eine durchdachte Hierarchie von H1 über H2 bis H3 ist daher kein SEO-Schnickschnack, sondern Orientierungshilfe.
Alternativtexte: Beschreibung statt Dekoration
Bilder brauchen eine textuelle Entsprechung. Ein guter Alternativtext beschreibt, was das Bild aussagt, nicht nur, wie es aussieht. Ein Diagramm braucht mehr als „Grafik“: Es braucht die Kernaussage, die im Bild steckt.
Rein dekorative Bilder bekommen dagegen ein leeres alt-Attribut, damit Screenreader sie überspringen. Ein Dateiname wie „image_123.jpg“ als Alternativtext ist keine Beschreibung, sondern eine Barriere.
Tastatur und Fokus: der unterschätzte Klassiker
Viele Menschen bedienen Websites ohne Maus: weil sie motorisch eingeschränkt sind, weil sie lieber mit der Tastatur arbeiten oder weil der Arm gerade im Gips steckt. Ein sichtbarer Fokus und eine logische Tab-Reihenfolge entscheiden darüber, ob eine Seite überhaupt bedienbar ist.
Der Klassiker: Der Fokusrahmen wird per CSS entfernt, weil er „hässlich“ aussieht. Wer mit der Tastatur navigiert, sieht dann nicht mehr, welches Element gerade aktiv ist, und verliert die Orientierung. Besser ist ein deutlich sichtbarer, gut gestalteter Fokus, der zum Design passt. Die WCAG verlangen das im Kriterium Fokus sichtbar (2.4.7), die strengere Stufe beschreibt die Fokuserscheinung (2.4.13).
Formulare: Beschriftungen und Fehlermeldungen
Formulare gehören zu den häufigsten Barrieren im Web. Jedes Feld braucht eine eindeutige, sichtbare Beschriftung, nicht nur einen Platzhalter, der beim Tippen verschwindet. Fehlermeldungen erklären, was genau falsch ist und wie es sich beheben lässt, statt nur „Fehler“ zu melden.
Für Menschen mit Screenreader ist entscheidend, dass Beschriftung und Feld technisch miteinander verknüpft sind. Nur dann ist klar, welcher Text zu welchem Eingabefeld gehört. Wie das im Detail aussieht, zeigt der Artikel Formulare, die niemand abbricht. Die zugehörige WCAG-Anforderung ist die Fehlererkennung (3.3.1).
Farben: mehr als Kontrast
Nicht alle Menschen nehmen Farben gleich wahr, und angeborene Farbsehschwächen sind bei Männern deutlich häufiger als bei Frauen. Farbe darf deshalb nie das einzige Unterscheidungsmerkmal sein. Ein rot markiertes Pflichtfeld braucht zusätzlich ein Sternchen oder den Text „Pflichtfeld“. Ein Diagramm, das Kategorien nur über Farben trennt, ist für viele nicht lesbar. Mehr dazu im Artikel Farbenblindheit im UX-Design.
Kontrast bleibt wichtig, ist aber nur ein Teil des Farbthemas. Mindestens genauso wichtig ist, dass Information nie allein über Farbe transportiert wird.
Bewegung, Animationen und Zeit
Animationen können schön sein, für manche Menschen sind sie ein Problem. Wer eine vestibuläre Störung hat, also eine Störung des Gleichgewichtssinns, kann auf großflächige Bewegungen mit Übelkeit und Schwindel reagieren. Über die CSS-Media-Query prefers-reduced-motion lassen sich Animationen reduzieren oder abschalten, wenn jemand das im Betriebssystem eingestellt hat. Die passende WCAG-Anforderung heißt Animation durch Interaktionen (2.3.3).
Auch Zeitlimits sind eine häufige Barriere. Wer Inhalte nach 30 Sekunden automatisch verschwinden lässt oder ein Formular nach zwei Minuten zurücksetzt, schließt langsam Lesende, Menschen mit kognitiven Einschränkungen und alle aus, die zwischendurch unterbrochen werden.
Ton und Video: Untertitel und Transkripte
Videos ohne Untertitel sind für gehörlose und schwerhörige Menschen unbrauchbar, und für alle, die gerade ohne Kopfhörer in der Bahn sitzen. Untertitel sind Pflicht, ein Transkript ist ein wertvolles Extra. Reine Audio-Inhalte wie Podcasts brauchen eine Textfassung.
Verständlichkeit: auch Sprache kann eine Barriere sein
Barrierefreiheit endet nicht bei der Technik. Klare Sprache, eindeutige Formularbeschriftungen und verständliche Fehlermeldungen helfen Menschen mit kognitiven Einschränkungen und Lernschwierigkeiten, und ganz nebenbei allen, die einfach schnell etwas erledigen wollen.
Konkret heißt das: kurze Sätze, aktive Formulierungen, Fachbegriffe erklären, Abkürzungen beim ersten Auftreten ausschreiben. Leichte Sprache und Einfache Sprache sind dabei zwei unterschiedliche Konzepte. Leichte Sprache folgt festen Regeln und richtet sich vor allem an Menschen mit Lernschwierigkeiten, Einfache Sprache ist weniger streng. Schon Einfache Sprache bringt viel.
Zoom und Reflow: flexible Layouts
Viele Menschen vergrößern Inhalte stark. Die WCAG verlangen, dass sich Text auf 200 Prozent vergrößern lässt, ohne dass Inhalte oder Funktionen verloren gehen. Außerdem soll der Inhalt bei einer Breite von 320 CSS-Pixeln ohne horizontales Scrollen lesbar bleiben, was ungefähr einem Zoom auf 400 Prozent entspricht. Ein gutes Layout bricht dann um, statt Inhalte abzuschneiden. Das ist nicht nur eine Frage der Barrierefreiheit, sondern auch des responsiven Designs, und funktioniert auf dem Smartphone gleich mit.
Die rechtliche Seite
Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Es betrifft viele Produkte und Dienstleistungen, darunter Onlineshops und andere digitale Angebote, über die Privatpersonen online Verträge abschließen. Wer früh barrierefrei baut, spart sich teures Nachrüsten. Was das Gesetz genau verlangt und wen es betrifft, erklärt der Artikel BFSG in der Praxis.
Warum das alle betrifft
Viele Einschränkungen sind nicht dauerhaft. Wer mit müden Augen am Handy liest, in der lauten Bahn ein Video ohne Ton schaut oder mit gebrochenem Arm arbeitet, profitiert von barrierefreiem Design. Fachleute sprechen von situativen und temporären Einschränkungen, die früher oder später fast alle treffen.
Barrierefreiheit ist daher kein Randthema, sondern eine Grundlage guter User Experience. Sie zwingt zu Klarheit, Struktur und Einfachheit, und genau davon profitieren am Ende alle, unabhängig von Einschränkung, Gerät oder Situation.
So startest du: die wichtigsten Schritte
- Struktur prüfen: Sind Überschriften logisch gegliedert? Gibt es Landmarks und sinnvolle Listen?
- Tastatur testen: Lass die Maus weg und navigiere nur mit der Tab-Taste. Kommst du überall hin, und siehst du immer, wo du bist?
- Bilder beschreiben: Haben alle informativen Bilder einen aussagekräftigen Alternativtext?
- Formulare prüfen: Sind alle Felder beschriftet und Fehlermeldungen verständlich?
- Kontrast messen: Nutze einen Kontrastprüfer, aber vergiss nicht, dass Kontrast nur der Anfang ist.
- Untertitel ergänzen: Haben alle Videos Untertitel und alle Audio-Inhalte eine Textfassung?
Welche Werkzeuge bei der Prüfung helfen, zeigt der Artikel Accessibility-Prüfung: Werkzeuge und Methoden für UX-Designer.
Fazit
Kontrast und Schriftgröße sind wichtig, aber sie sind nicht das Ziel. Das Ziel ist ein Web, das alle nutzen können, unabhängig von Einschränkung, Gerät oder Situation. Wer Barrierefreiheit als System aus Struktur, Bedienbarkeit, Verständlichkeit und Technik begreift, baut bessere Produkte für alle. Und fängt am besten heute damit an.