Die teuerste Art, eine Website barrierefrei zu machen, ist, erst damit anzufangen, wenn sie fertig ist. Genau diesen Fehler sehe ich in Projekten immer wieder: Monatelang wird gestaltet und gebaut, dann kommt das Audit, und plötzlich müssen Farbschemata, Komponenten und ganze Layout-Entscheidungen zurückgebaut werden. Barrierefreies Webdesign ist keine Disziplin, die man am Ende draufsetzt – es ist eine Handvoll Weichenstellungen, die ganz am Anfang fallen und über den größten Teil des späteren Aufwands entscheiden. In diesem Ratgeber zeige ich Ihnen die Design-Entscheidungen, die am Projektstart fast nichts kosten und Ihnen später rund 80 Prozent der typischen Audit-Findings ersparen.
Was barrierefreies Webdesign ausmacht
Barrierefreies Webdesign bedeutet, eine Website von Anfang an so zu gestalten, dass sie von möglichst vielen Menschen genutzt werden kann – unabhängig von Seheinschränkungen, motorischen Fähigkeiten, kognitiven Voraussetzungen oder der verwendeten Technologie. Es geht dabei nicht um ein spezielles Aussehen oder um optische Kompromisse, sondern um durchdachte Entscheidungen bei Farben, Kontrasten, Schriftgrößen, Bedienelementen, Navigation und Struktur. Gutes barrierefreies Design ist in aller Regel auch besseres Design: klarer, robuster und für alle Nutzer angenehmer. Es folgt vier Grundprinzipien – wahrnehmbar, bedienbar, verständlich und robust –, die den gesamten WCAG-Standard tragen.
Warum die wichtigsten Entscheidungen am Projektanfang fallen
Der Grund, warum frühe Entscheidungen so viel wert sind, ist simpel: Sie wirken auf jede einzelne Seite, jede Komponente und jeden künftigen Inhalt. Wenn Ihre Farbpalette von Anfang an kontraststark definiert ist, entsteht nie ein Kontrast-Finding – nicht auf der Startseite, nicht im Footer, nicht in einer Kampagnen-Landingpage, die zwei Jahre später entsteht. Treffen Sie die Entscheidung dagegen falsch, multipliziert sich der Fehler über die gesamte Website und muss an hunderten Stellen einzeln korrigiert werden. Frühe Weichenstellungen kosten einmal Nachdenken. Späte Korrekturen kosten Nachbau – und der ist teuer.
Die Design-Entscheidungen mit dem größten Hebel
Diese Weichenstellungen gehören in die ersten Tage eines Projekts, in die Design-Tokens und das Komponenten-System. Jede einzelne verhindert eine ganze Kategorie späterer Findings.
| Entscheidung am Anfang | Vermiedenes Audit-Finding später |
|---|---|
| Farbpalette mit geprüften Kontrastwerten definieren | Unzählige Kontrastverstöße über die ganze Seite |
| Information nie allein über Farbe transportieren | Status- und Fehleranzeigen, die nur Farbsehende verstehen |
| Sichtbaren Fokus-Indikator ins Design aufnehmen | Unsichtbarer Tastaturfokus auf der gesamten Seite |
| Klick- und Touch-Ziele großzügig dimensionieren | Zu kleine Bedienelemente, besonders auf Mobilgeräten |
| Skalierbare Typografie mit relativen Einheiten | Layout-Brüche beim Vergrößern des Texts |
| Visuelle Hierarchie an logische Struktur koppeln | Überschriften-Ebenen, die Optik statt Bedeutung folgen |
| Konsistente Navigation und Komponenten | Orientierungsverlust durch wechselnde Muster |
Farbe und Kontrast zuerst
Die folgenreichste Einzelentscheidung ist die Farbpalette. Wenn Sie Ihre Marken- und Designfarben so festlegen, dass Text-zu-Hintergrund-Kombinationen die WCAG-Mindestwerte erfüllen, lösen Sie das häufigste Accessibility-Problem überhaupt an der Wurzel. Genauso wichtig: Verlassen Sie sich nie allein auf Farbe, um Bedeutung zu transportieren – ein rotes Pflichtfeld braucht zusätzlich ein Symbol oder einen Text. Die konkreten Mindestwerte und den Rechenweg dahinter habe ich in Kontraste nach WCAG richtig prüfen: Mindestwerte und typische Fehler aufgeschlüsselt.
Fokus, Bedienelemente und Skalierbarkeit
Ein sichtbarer Fokus-Indikator gehört ins Design, nicht in die Liste der Dinge, die man später nachrüstet. Der verbreitete Reflex, die Fokus-Umrandung per CSS zu entfernen, weil sie „stört“, macht eine Seite für Tastatur-Nutzer unbenutzbar. Ebenso früh einzuplanen sind ausreichend große Klick- und Touch-Ziele und eine Typografie, die sich vergrößern lässt, ohne dass das Layout zerbricht. Welche Rolle Schriftwahl und Textgestaltung dabei spielen, vertiefe ich in Barrierefreie Schriftarten und Typografie: Lesbarkeit, die alle einschließt.
Die Prinzipien dahinter: wahrnehmbar, bedienbar, verständlich, robust
Hinter all diesen Einzelentscheidungen stehen die vier Grundprinzipien der WCAG. Wahrnehmbar heißt, dass Inhalte für jeden Sinn erfassbar sein müssen – Text-Alternativen für Bilder, ausreichende Kontraste, Untertitel für Videos. Bedienbar bedeutet, dass sich alles per Tastatur, Maus und Touch steuern lässt, ohne Zeitfallen oder bewegungsabhängige Gesten. Verständlich verlangt klare Sprache, vorhersehbares Verhalten und hilfreiche Fehlermeldungen. Robust schließlich heißt, dass der Code sauber genug ist, damit assistive Technologien zuverlässig damit arbeiten. Wer diese vier Leitplanken im Kopf behält, trifft Designentscheidungen fast automatisch in die richtige Richtung.
Der häufigste Denkfehler: Barrierefreiheit als Nachrüstung
In meiner Arbeit begegnet mir immer wieder dieselbe Haltung: „Wir bauen erst mal, und am Ende lassen wir es barrierefrei machen.“ Das ist der teuerste denkbare Weg. Eine Barriere, die im Design-System verankert ist, sitzt in jeder Komponente, die daraus entsteht. Sie nachträglich zu entfernen, bedeutet, das System und alle darauf aufbauenden Seiten anzufassen. Barrierefreiheit am Anfang mitzudenken kostet ein paar bewusste Entscheidungen. Sie am Ende nachzurüsten kostet ein Redesign. Diese Rechnung geht in praktisch jedem Projekt zugunsten des frühen Ansatzes aus.
Barrierefreies Design ist besseres Design für alle
Der vielleicht unterschätzteste Punkt: Barrierefreies Webdesign nützt nicht nur Menschen mit Behinderungen. Das Phänomen ist als Curb-Cut-Effekt bekannt – die abgesenkten Bordsteine, ursprünglich für Rollstuhlfahrer gebaut, nutzen heute allen: Eltern mit Kinderwagen, Reisenden mit Rollkoffer, Lieferanten mit Sackkarre. Im Web ist es genauso. Ausreichender Kontrast hilft auch bei Sonnenlicht auf dem Smartphone. Klare Struktur hilft auch eiligen Nutzern und der Suchmaschine. Verständliche Sprache hilft auch Nicht-Muttersprachlern und steigert die Conversion. Große Touch-Ziele reduzieren Fehlklicks für jeden. Gutes barrierefreies Design ist deshalb selten ein Kompromiss – meistens ist es schlicht das robustere, durchdachtere Design.
Wie Sie Ihr aktuelles Design prüfen
Wenn Sie mitten in einem Projekt stecken oder eine bestehende Seite betreiben, ist der erste sinnvolle Schritt, den Ist-Zustand zu kennen. Unser kostenloser Access Score führt ein automatisiertes WCAG-2.2-Audit Ihrer Website durch und zeigt Ihnen, welche der hier beschriebenen Design-Entscheidungen bei Ihnen bereits stimmen und wo systematische Probleme schlummern – Kontraste, Fokus-Sichtbarkeit, Strukturfehler. Sie sehen damit nicht nur Einzelfehler, sondern die Muster dahinter, die meist auf eine frühe Design-Entscheidung zurückgehen.
Das ersetzt kein vollständiges Tiefen-Audit – viele Design-Aspekte wie die sinnvolle Lesereihenfolge oder die Verständlichkeit von Inhalten beurteilt erst ein Mensch. Aber es gibt Ihnen die Grundlage, um zu entscheiden, ob Sie an einzelnen Stellen nachbessern oder eine grundlegende Weichenstellung korrigieren müssen. Wie Sie speziell auf der WordPress-Plattform vorgehen, lesen Sie in WordPress barrierefrei machen: Plugins, Themes und die echten Stolperfallen.
