Eine Website kann optisch ansprechend sein und trotzdem viele Menschen ausschließen. Schwache Kontraste, unklare Formulare, fehlende Tastaturbedienung oder unbeschriftete Bedienelemente erschweren den Zugang – dauerhaft, situativ oder abhängig vom verwendeten Gerät.
Barrierefreies Webdesign berücksichtigt unterschiedliche Fähigkeiten von Beginn an. Davon profitieren nicht nur Menschen mit Behinderungen. Klare Inhalte, große Bedienflächen, Untertitel und verständliche Rückmeldungen helfen auch bei hellem Sonnenlicht, verletzter Hand, langsamer Verbindung oder lauter Umgebung.
Die vier Grundprinzipien
Die Web Content Accessibility Guidelines 2.2 des W3C ordnen Anforderungen vier Prinzipien zu. Inhalte und Funktionen sollen:
- wahrnehmbar sein,
- bedienbar sein,
- verständlich sein,
- robust mit unterschiedlichen Browsern und assistiven Technologien funktionieren.
Diese Prinzipien sind hilfreicher als eine reine Checkliste. Sie lenken den Blick auf die tatsächliche Nutzung und nicht nur auf technische Einzelwerte.
Wahrnehmbare Inhalte
Informationen dürfen nicht ausschließlich über eine einzige Sinneswahrnehmung vermittelt werden. Beispiele:
- Bilder erhalten passende Textalternativen.
- Videos werden mit Untertiteln und gegebenenfalls Audiodeskription ergänzt.
- Farbe ist nie der einzige Hinweis für Fehler oder Status.
- Text und Bedienelemente besitzen ausreichenden Kontrast.
- Inhalte lassen sich vergrößern, ohne verloren zu gehen.
Für normalen Text nennt WCAG 2.2 auf Stufe AA in vielen Fällen ein Mindestkontrastverhältnis von 4,5:1; für großen Text gelten andere Schwellen und Ausnahmen. Der Wert ist ein wichtiges Prüfkriterium, ersetzt aber keine Betrachtung von Schriftgröße, Gewicht, Hintergrundbildern und Zuständen.
Bedienung ohne Maus
Alle wichtigen Funktionen sollten mit der Tastatur erreichbar sein. Der Fokus muss sichtbar zeigen, welches Element gerade aktiv ist, und einer logischen Reihenfolge folgen.
Typische Probleme sind:
- Menüs, die nur auf Hover reagieren,
- Fokusmarkierungen, die aus Designgründen entfernt wurden,
- Dialoge, aus denen der Tastaturfokus entkommt,
- feststehende Elemente, die fokussierte Inhalte verdecken,
- eigene Bedienelemente ohne korrektes Tastaturverhalten.
Testen Sie eine Seite vollständig mit Tabulator-, Umschalt- und Eingabetaste. Schon dieser einfache Durchgang macht viele Barrieren sichtbar.
Große und gut getrennte Ziele
Kleine Links und eng nebeneinanderliegende Icons sind für Menschen mit eingeschränkter Feinmotorik schwer zu treffen. Auch unterwegs auf dem Smartphone entstehen leicht Fehleingaben.
WCAG 2.2 ergänzt unter anderem Anforderungen an Mindestzielgrößen und Abstände. Gute Gestaltung geht häufig über das formale Minimum hinaus: wichtige Aktionen erhalten eine komfortable Berührungsfläche und ausreichend Abstand zu gefährlichen Gegenaktionen wie „Löschen“ oder „Abbrechen“.
Verständliche Struktur und Sprache
Semantische Überschriften, Listen, Bereiche und Formulare helfen assistiven Technologien und machen Inhalte zugleich leichter scanbar. Eine optisch große Zeile ist nicht automatisch eine technische Überschrift.
Verständlichkeit umfasst außerdem:
- konkrete Seitentitel,
- eindeutige Linktexte,
- kurze Absätze und klare Zwischenüberschriften,
- konsistente Navigation,
- erklärte Fachbegriffe,
- vorhersehbare Interaktionen,
- hilfreiche Fehlermeldungen.
Barrierefreiheit ist damit auch eine redaktionelle Aufgabe.
Bilder, Icons und Alternativtexte
Ein Alt-Text beschreibt, was ein Bild im jeweiligen Zusammenhang vermittelt. Ein Porträt auf der Teamseite braucht eine andere Beschreibung als dasselbe Foto in einem Pressebereich.
Rein dekorative Bilder sollen von assistiven Technologien übersprungen werden können. Funktionsicons benötigen einen zugänglichen Namen. Sichtbarer Text im Bild ist problematisch, weil er schlechter vergrößert, übersetzt und vorgelesen werden kann.
Automatisch erzeugte Beschreibungen sollten geprüft werden. Sie erkennen nicht zuverlässig, welche Information für den Kontext entscheidend ist.
Barrierearme Formulare
Jedes Feld braucht eine eindeutige, programmatisch zugeordnete Beschriftung. Anforderungen und Formate werden vor der Eingabe erklärt. Fehlermeldungen nennen Ursache und Lösung und bleiben nicht auf eine rote Umrandung beschränkt.
Lange Formulare sollten logisch gruppiert werden. Zeitlimits sind möglichst zu vermeiden oder müssen verlängerbar sein. Nach dem Absenden braucht es eine klar erkennbare Bestätigung.
Bewegung und Medien
Automatisch startende Videos, schnelle Parallax-Effekte und große Zoombewegungen können ablenken oder Beschwerden auslösen. Websites sollten die Systemeinstellung für reduzierte Bewegung respektieren.
Untertitel müssen Sprache und wichtige Geräusche wiedergeben. Ein automatisch erzeugter Entwurf kann Zeit sparen, sollte aber redaktionell korrigiert werden. Steuerungen für Wiedergabe und Lautstärke müssen erreichbar und verständlich sein.
Technik: Semantik vor Reparatur-ARIA
Native HTML-Elemente bringen bereits viele Rollen und Bedienmuster mit. Ein echter Button ist meist robuster als eine allgemeine Fläche, der nachträglich Verhalten und Beschriftung hinzugefügt werden.
ARIA kann fehlende semantische Informationen ergänzen, macht ein unbedienbares Element aber nicht automatisch zugänglich. Die technische Grundlage bleibt: sauberes HTML, logische Reihenfolge und getestetes Verhalten.
Automatische Tests reichen nicht aus
Prüfwerkzeuge finden beispielsweise fehlende Alternativtexte, manche Kontrastprobleme oder ungültige Rollen. Sie erkennen jedoch nicht zuverlässig, ob ein Alt-Text sinnvoll ist, die Sprache verständlich bleibt oder ein Ablauf mit Screenreader logisch funktioniert.
Eine gute Prüfung kombiniert:
- automatisierte Tests,
- Tastaturdurchgang,
- Vergrößerung und Umbruchtests,
- Screenreader-Prüfung,
- Kontrastkontrolle aller Zustände,
- Nutzung auf mehreren Geräten,
- Tests mit Menschen mit Behinderungen.
Barrierefreiheit früh einplanen
Nachträgliche Korrekturen sind aufwendiger, weil Struktur, Komponenten, Inhalte und Prozesse bereits feststehen. Wird Zugänglichkeit in Konzeption und Designsystem verankert, profitieren alle neuen Seiten davon.
Definieren Sie früh:
- Typografie und Kontrastrollen,
- Fokus- und Fehlerzustände,
- Tastaturverhalten,
- Regeln für Bilder und Medien,
- zugängliche Komponenten,
- Prüfungen vor Veröffentlichung.
Häufige Fehler
- niedriger Textkontrast
- Fokusmarkierung entfernt
- Navigation nur per Maus bedienbar
- leere oder automatisch ungeprüfte Alt-Texte
- Formularfelder ohne sichtbare Labels
- Status nur über Farbe
- kleine, eng stehende Bedienflächen
- unkontrollierte Animationen
- unklare Überschriftenstruktur
- Vertrauen ausschließlich in automatische Prüfwerte
Checkliste für barrierefreies Webdesign
- Sind Inhalte mit verschiedenen Wahrnehmungswegen erfassbar?
- Bleiben Texte und Bedienelemente kontrastreich?
- Funktioniert jede Aufgabe mit Tastatur?
- Ist der Fokus immer sichtbar?
- Sind Ziele ausreichend groß und getrennt?
- Ist die Überschriftenstruktur logisch?
- Haben informative Bilder passende Alternativtexte?
- Sind Formulare eindeutig beschriftet?
- Wird reduzierte Bewegung berücksichtigt?
- Kombiniert die Prüfung Tools und reale Nutzung?
Häufige Fragen
Was ist WCAG 2.2?
WCAG 2.2 ist eine Empfehlung des W3C mit überprüfbaren Kriterien für zugänglichere Webinhalte. Sie baut auf früheren Versionen auf und ergänzt unter anderem Anforderungen zu Fokus, Zielgrößen und zugänglicher Authentifizierung.
Ist Barrierefreiheit nur für öffentliche Stellen wichtig?
Nein. Unabhängig von konkreten rechtlichen Pflichten verbessert sie Reichweite, Qualität und Bedienbarkeit jeder Website. Rechtliche Anforderungen sollten für das jeweilige Unternehmen gesondert geprüft werden.
Macht ein Plugin eine Website barrierefrei?
Ein Overlay kann grundlegende Probleme in Struktur, Inhalt und Bedienung nicht zuverlässig beheben. Barrierefreiheit muss in Design, Code, Redaktion und Tests verankert sein.
Kann man Barrierefreiheit automatisch testen?
Nur teilweise. Automatische Werkzeuge sind wertvoll, benötigen aber manuelle und nutzerbasierte Ergänzungen.
Muss eine barrierefreie Website langweilig aussehen?
Nein. Klare Kontraste, sichtbare Zustände und verständliche Strukturen lassen viel Raum für eine eigenständige, hochwertige Gestaltung.
Fazit: Zugänglichkeit ist ein Qualitätsmerkmal
Barrierefreies Webdesign verbindet klare Inhalte, robuste Technik und sorgfältige Interaktion. Es erweitert den Kreis der Menschen, die eine Website selbstständig nutzen können, und verbessert häufig das Erlebnis für alle.
Möchten Sie die Barrieren Ihrer Website kennen?
MBCreate prüft Struktur, Kontrast, Tastaturbedienung und zentrale Nutzerwege und entwickelt konkrete Verbesserungen oder ein barrierebewusstes Redesign.
