Warum Barrierefreiheit mehr als Kontrast und Größe ist

Wer an Barrierefreiheit denkt, denkt meist an zwei Dinge: genug Kontrast und große Schrift. Beides ist wichtig – keine Frage. Aber wer Barrierefreiheit 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 für wenige. Rund 7,8 Millionen Menschen in Deutschland leben mit einer anerkannten Behinderung – und unzählige weitere stoßen im Alltag auf Barrieren, ohne es zu merken. 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 in 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 Web Content Accessibility Guidelines (WCAG) sind der internationale Standard für barrierefreie Websites. Sie bauen auf vier Prinzipien auf, die weit über das Visuelle hinausgehen. Auf Englisch lassen sie sich als POUR zusammenfassen – die Anfangsbuchstaben der vier Begriffe:

1. Wahrnehmbar (Perceivable)

Inhalte müssen für alle Sinne zugänglich sein. Kontrast und Schriftgröße gehören hier dazu – aber eben auch Alternativtexte für Bilder, Untertitel für Videos und eine sinnvolle Überschriftenstruktur. Wer Inhalte nur über eine einzige Sinnesmodalität vermittelt, schließt Menschen aus.

2. Bedienbar (Operable)

Alles muss ohne Maus funktionieren – allein ü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 sollten konsistent bleiben, Fehlermeldungen verständlich 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, valides HTML und korrektes ARIA sind hier 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 Nutzer das, was für sehende Nutzer 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. Semantisches HTML und ARIA machen aus einem hübschen Klick-Element erst ein bedienbares Element.

Überschriften sind dabei besonders wichtig. Viele Screenreader-Nutzer springen von Überschrift zu Überschrift, um sich einen Überblick zu verschaffen – ähnlich wie sehende Nutzer eine Seite überfliegen. Eine durchdachte H1-H2-H3-Hierarchie 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, wie es aussieht. Ein Diagramm braucht mehr als „Grafik“: Es braucht die Kernaussage, die im Bild steckt.

Rein dekorative Bilder sollten dagegen leer bleiben, damit Screenreader sie überspringen. Jedes Bild mit einem nichtssagenden Platzhalter wie „image_123.jpg“ ist eine verpasste Chance – oder schlicht eine Barriere.

Tastatur und Fokus: Der unterschätzte Klassiker

Viele Menschen bedienen Websites ohne Maus – weil sie motorisch eingeschränkt sind, weil sie lieber die Tastatur nutzen 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 Fokus-Indikator wird per CSS entfernt, weil er „hässlich“ aussieht. Das Ergebnis: Tastatur-Nutzer wissen nicht mehr, wo sie sich befinden – und verlieren die Orientierung komplett. Der bessere Weg ist ein deutlich sichtbarer, gut gestalteter Fokus, der zum Design passt.

Formulare: Beschriftungen und Fehlermeldungen

Formulare sind die häufigste Barriere im Web. Jedes Feld braucht eine eindeutige, sichtbare Beschriftung – nicht nur einen Platzhalter, der beim Tippen verschwindet. Fehlermeldungen müssen erklären, was genau falsch ist und wie es zu beheben ist, statt nur „Fehler“ zu melden.

Für Screenreader-Nutzer ist entscheidend, dass Beschriftung und Feld technisch miteinander verknüpft sind. Nur dann ist klar, welcher Text zu welchem Eingabefeld gehört.

Farben: Mehr als Kontrast

Rund 8 Prozent der Männer haben eine Rot-Grün-Schwäche. Farbe darf daher niemals das einzige Unterscheidungsmerkmal sein. Ein rot markiertes Pflichtfeld braucht zusätzlich einen Stern oder den Text „Pflichtfeld“. Ein Diagramm, das Kategorien nur über Farben trennt, ist für viele nicht lesbar.

Kontrast ist wichtig – aber er ist 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. Menschen mit vestibulären Störungen können auf schnelle Bewegungen mit Übelkeit und Schwindel reagieren. Der CSS-Befehl prefers-reduced-motion erlaubt es, Animationen für diese Nutzer zu reduzieren oder abzuschalten.

Auch Zeitlimits sind eine häufige Barriere. Wer Inhalte nach 30 Sekunden automatisch verschwinden lässt oder ein Formular nach 2 Minuten zurücksetzt, schließt langsame Leser, Menschen mit kognitiven Einschränkungen und alle aus, die nebenbei 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 in der Bahn ohne Kopfhörer sitzen. Untertitel sind Pflicht, ein Transkript ist ein wertvolles Extra. Audio-Inhalte wie Podcasts brauchen eine Textfassung.

Verständlichkeit: Barrierefreiheit ist auch Sprachbarrierefreiheit

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 – aber schon Einfache Sprache bringt viel.

Zoom und Reflow: Flexible Layouts

Viele Menschen vergrößern Inhalte auf 200 oder 400 Prozent. Ein gutes Layout bricht dann um, statt Inhalte abzuschneiden oder horizontales Scrollen zu erzwingen. Das ist nicht nur eine Frage der Barrierefreiheit, sondern auch des responsiven Designs – und funktioniert auf dem Handy gleich mit.

Die rechtliche Seite

Spätestens seit dem Barrierefreiheitsstärkungsgesetz (BFSG) ist das Thema auch rechtlich relevant. Ab Mitte 2025 gilt es für viele Produkte und Dienstleistungen – darunter auch Websites und Online-Shops. Wer früh barrierefrei baut, vermeidet Abmahnungen und Nachrüstkosten. Was genau das Gesetz verlangt und wen es betrifft, erklären wir im Beitrag BFSG: Das Barrierefreiheitsstärkungsgesetz einfach erklärt.

Warum das alle betrifft

Behinderung ist selten dauerhaft. Wer mit müden Augen am Handy liest, wer in der lauten Bahn ein Video ohne Ton schaut, wer mit einem gebrochenen Arm arbeitet – alle profitieren von barrierefreiem Design. Fachleute sprechen von situativen und temporären Einschränkungen, die uns alle irgendwann treffen.

Barrierefreiheit ist daher kein Randthema, sondern die Grundlage guter User Experience. Sie zwingt zu Klarheit, Struktur und Einfachheit – und genau davon profitieren am Ende alle Nutzer, unabhängig von Einschränkung, Gerät oder Situation.

So startest du: Die wichtigsten Schritte

• Struktur prüfen: Sind Überschriften logisch hierarchisiert? Gibt es Landmarks und sinnvolle Listen?
• Tastatur testen: Lass die Maus weg und navigiere deine Seite 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, alle Audio-Inhalte eine Textfassung?

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 begreift – Struktur, Bedienbarkeit, Verständlichkeit, Technik – baut bessere Produkte für alle. Und beginnt am besten heute damit.