Barrierefreies Webdesign: Grundlagen für Design und Entwicklung

Die günstigste und robusteste Barrierefreiheit ist die, die von Anfang an mitgestaltet wird. Ein unzugängliches Design nachträglich umzubauen, ist teuer – und eine Overlay-Schicht am Ende draufzulegen, funktioniert gar nicht. Dieser Artikel behandelt die Grundlagen aus Design und Entwicklung, die Barrieren vermeiden, bevor sie entstehen. Den Gesamtprozess beschreibt Website barrierefrei machen

Barrierefreiheit von Anfang an mitdenken

Wer Barrierefreiheit von Beginn an einplant, zahlt einen Bruchteil dessen, was ein nachträglicher Umbau kostet, und bekommt ein stabileres Ergebnis. Es ist zugleich das Gegenteil der Overlay-Abkürzung, die am Ende etwas aufsetzt und scheitert (mehr dazu in Accessibility-Overlays). Die gute Nachricht: Das meiste davon ist ohnehin gutes Gestaltungs- und Entwicklungshandwerk.

Farbe, Kontrast und Lesbarkeit

Information darf nie allein über Farbe vermittelt werden – ergänze sie um Text, Symbole oder Muster, damit auch Menschen mit Farbsehschwäche sie erfassen. Plane ausreichende Kontraste von Anfang an ein, statt sie später nachzubessern; die konkreten Werte behandelt Farbkontrast nach WCAG

Zur Lesbarkeit gehören angemessene Schriftgrößen, genügend Zeilenabstand und eine nicht zu lange Zeilenlänge. Text muss sich vergrößern lassen – die Zoom-Funktion darf nicht deaktiviert werden.

Struktur und Hierarchie

Eine klare visuelle Hierarchie sollte mit einer klaren semantischen Struktur zusammenfallen: genau eine H1, logisch verschachtelte Überschriften und eine sinnvolle Lesereihenfolge. Orientierungsbereiche (Landmarks) helfen assistiver Technik, sich zurechtzufinden. Gestalte also die Struktur – style nicht nur Kästen.

Fokus und Interaktion

Gestalte sichtbare Fokus-Zustände, statt sie der Entwicklung zu überlassen, die die Fokusanzeige womöglich entfernt. Mach den Fokus zum Teil der visuellen Sprache, mit klar unterscheidbaren Zuständen für Hover, Fokus und Aktiv. Alles muss per Tastatur bedienbar sein – mehr dazu in Tastaturbedienbarkeit. Und plane interaktive Ziele groß genug und nicht zu eng beieinander.

Formulare und Bedienelemente

Formulare sind ein häufiger Stolperstein. Beschriftungen müssen immer sichtbar und klar mit dem Feld verknüpft sein – ein Platzhaltertext allein genügt nicht, weil er bei der Eingabe verschwindet. Fehlermeldungen sollten konkret benennen, was zu tun ist, und dem betroffenen Feld zugeordnet sein. Sorge für ausreichende Abstände und mach Pflichtfelder erkennbar, nicht allein über Farbe.

Bewegung und Animation

Respektiere Nutzer, die reduzierte Bewegung bevorzugen (prefers-reduced-motion), und biete eine Möglichkeit, Animationen zu pausieren. Verzichte auf automatisch startende, blinkende oder schnell bewegte Inhalte – sie können ein Anfallsrisiko darstellen und lenken stark ab.