Barrierefreiheit für Designer: Inklusives visuelles und Interaktionsdesign gestalten

Eine barrierefreie Website beginnt mit barrierefreiem Design. Viele der häufigsten Barrierefreiheitsmängel — unzureichender Farbkontrast, unklare Navigation, verwirrende Layouts, fehlende Fokusindikatoren — entstehen durch Entscheidungen in der Designphase. Wenn der Code geschrieben wird, sind diese Probleme bereits festgelegt, und ihre Behebung erfordert ein Redesign statt einer einfachen Code-Anpassung.

Als Designer haben Sie mehr Einfluss auf die Barrierefreiheit als fast jede andere Person im Team. Die Entscheidungen, die Sie über Farbe, Typografie, Abstände, Navigationsmuster und Interaktionsmodelle treffen, bestimmen, ob Millionen von Nutzern effektiv mit Ihrem Produkt interagieren können.

Farbkontrast

Unzureichender Farbkontrast ist eines der häufigsten Barrierefreiheitsprobleme im Web. WCAG verlangt ein Mindestkontrasrverhältnis von 4,5:1 zwischen Text und Hintergrund für normalgroßen Text und 3:1 für großen Text (definiert als 18pt regulär oder 14pt fett). Auf Stufe AAA erhöht sich die Anforderung auf 7:1 für normalen Text und 4,5:1 für großen Text.

Diese Verhältnisse existieren, weil Menschen mit Sehbeeinträchtigungen, alternden Augen oder Farbsehstörungen ausreichend Kontrast benötigen, um Text von seinem Hintergrund unterscheiden zu können. Hellgrauer Text auf weißem Hintergrund mag in einem Design-Mockup elegant aussehen, wird aber für einen erheblichen Prozentsatz der Nutzer unlesbar.

Auch Nicht-Text-Elemente unterliegen Kontrastanforderungen. Benutzeroberflächenkomponenten — Schaltflächen, Formularfelder, Icons, Fokusindikatoren — und aussagekräftige grafische Objekte müssen ein Kontrastverhältnis von mindestens 3:1 gegenüber angrenzenden Farben einhalten. Dies stellt sicher, dass Nutzer interaktive Elemente erkennen und informative Grafiken verstehen können.

Verwenden Sie Kontrastprüfungs-Tools während Ihres gesamten Designprozesses, nicht erst am Ende. Tools wie der WebAIM Contrast Checker oder der Colour Contrast Analyser ermöglichen es Ihnen, Verhältnisse zu überprüfen, bevor Sie sich auf eine Farbpalette festlegen.

Farbe als Informationsträger

Farbe darf niemals das einzige visuelle Mittel zur Informationsvermittlung sein. Wenn Sie Rot für Fehler und Grün für Erfolg verwenden, können farbenblinde Nutzer möglicherweise nicht zwischen den beiden Zuständen unterscheiden. Ergänzen Sie Farbe immer durch zusätzliche Indikatoren — Icons, Textbeschriftungen, Muster oder Unterstreichungen.

Dies gilt auch für Links. Wenn Links innerhalb eines Textblocks nur durch Farbe unterschieden werden, müssen sie ein Kontrastverhältnis von 3:1 zum umgebenden Text aufweisen oder durch einen weiteren visuellen Indikator wie eine Unterstreichung ergänzt werden.

Typografie und Textgrößen

Jeder Text auf Ihrer Website muss ohne Verlust von Inhalt oder Funktionalität auf bis zu 200 % vergrößert werden können. Dies bedeutet, dass Sie mit flexiblen, relativen Einheiten statt festen Pixelwerten arbeiten und sicherstellen müssen, dass sich Ihre Layouts bei vergrößertem Text angemessen anpassen.

WCAG 2.2 enthält auch Anforderungen für Textabstände. Nutzer müssen die Zeilenhöhe auf mindestens das 1,5-fache der Schriftgröße, den Absatzabstand auf mindestens das 2-fache der Schriftgröße, den Buchstabenabstand auf das 0,12-fache der Schriftgröße und den Wortabstand auf das 0,16-fache der Schriftgröße anpassen können — ohne Verlust von Inhalt oder Funktionalität.

Link-Design

Links müssen sich visuell vom umgebenden Text unterscheiden. Sie sollten beschreibend und prägnant sein und den Nutzern mitteilen, was sie finden, wenn sie dem Link folgen. Verwenden Sie niemals „Hier klicken" oder „Mehr erfahren" als Linktext ohne zusätzlichen Kontext, da diese Formulierungen für Screenreader-Nutzer, die über Linklisten navigieren, bedeutungslos sind.

Navigation und Konsistenz

Die Navigation muss auf allen Seiten Ihrer Website konsistent sein. Nutzer, die auf Tastaturnavigation oder Screenreader angewiesen sind, bauen ein mentales Modell der Seitenstruktur auf, und unerwartete Änderungen stören dieses Modell. WCAG verlangt, dass Navigationsmechanismen, die auf mehreren Seiten erscheinen, jedes Mal in der gleichen relativen Reihenfolge auftreten und dass Komponenten mit gleicher Funktionalität konsistent benannt werden.

Fokusindikatoren

Wenn ein Nutzer Ihre Website mit der Tastatur navigiert, muss ein sichtbarer Indikator anzeigen, welches Element gerade den Fokus hat. Dieser Fokusindikator muss klar sichtbar sein — WCAG 2.2 verlangt, dass er nicht von anderen Inhalten verdeckt wird (SC 2.4.11), und auf Stufe AAA, dass der gesamte Fokusindikator und die fokussierte Komponente vollständig sichtbar sind (SC 2.4.12).

Gestalten Sie Fokusindikatoren bewusst. Die standardmäßige Browser-Umrandung ist oft unzureichend oder wird durch CSS-Resets entfernt. Entwerfen Sie einen benutzerdefinierten Fokusstil, der ausreichend Kontrast hat und visuell auffällig ist.

Touch-Zielgrößen

Interaktive Elemente müssen groß genug sein, um ohne Schwierigkeiten aktiviert werden zu können. WCAG 2.2 verlangt, dass interaktive Ziele mindestens 24×24 CSS-Pixel groß sein müssen (SC 2.5.8), einschließlich des umgebenden Leerraums. Auf Stufe AAA erhöht sich die Anforderung auf 44×44 Pixel (SC 2.5.5). Dies kommt Nutzern mit motorischen Behinderungen, Tremor oder eingeschränkter Fingerfertigkeit zugute, ebenso wie jedem, der ein Mobilgerät in einer holprigen Umgebung nutzt.

Formular-Design

Formulare sind einer der kritischsten Bereiche für barrierefreies Design. Jedes Formularsteuerelement benötigt eine klar sichtbare Beschriftung, die dem Nutzer mitteilt, welche Informationen anzugeben sind. Fehlermeldungen müssen spezifisch und sichtbar sein und in der Nähe des betreffenden Feldes positioniert werden. Geben Sie bei Bedarf Anweisungen, und verlassen Sie sich nicht ausschließlich auf Platzhaltertext als Beschriftung — Platzhaltertext verschwindet, wenn der Nutzer mit der Eingabe beginnt, und hat oft unzureichenden Kontrast.

Gestalten Sie Formulare fehlervermeidend. Ermöglichen Sie es Nutzern, Eingaben vor dem Absenden zu überprüfen und zu korrigieren, insbesondere bei Aktionen mit erheblichen Konsequenzen wie Finanztransaktionen oder rechtlichen Vereinbarungen. Wenn Fehler erkannt werden, geben Sie klare Hinweise zur Behebung.

Bewegung und Animation

Manche Nutzer erleiden Anfälle, Migräne oder Schwindel durch animierte oder blinkende Inhalte. Nichts auf Ihrer Website sollte mehr als dreimal pro Sekunde blinken. Stellen Sie Steuerungen bereit, um Inhalte, die sich bewegen, blinken oder scrollen und länger als fünf Sekunden dauern, anzuhalten, zu stoppen oder auszublenden. Respektieren Sie die Betriebssystemeinstellung „prefers-reduced-motion" und bieten Sie reduzierte Bewegungsalternativen für Animationen an.

Bilder von Text

Vermeiden Sie die Verwendung von Bildern von Text auf Ihrer Website. Echter Text kann vergrößert, umformatiert und von assistiven Technologien gelesen werden. Bilder von Text können das nicht. Die einzigen Ausnahmen sind Logos und Situationen, in denen eine bestimmte visuelle Darstellung des Textes für die vermittelte Information wesentlich ist.

Barrierefreiheits-Checkliste für Designer

Überprüfen Sie vor der Übergabe jedes Designs an die Entwicklung: Kontrastverhältnisse erfüllen die Anforderungen für alle Texte und interaktiven Elemente; Farbe ist nie der einzige Informationsindikator; Fokuszustände sind für alle interaktiven Elemente gestaltet; Touch-Ziele erfüllen die Mindestgrößenanforderungen; Navigation ist auf allen Seiten konsistent; Fehlerzustände und Meldungen sind klar gestaltet; Text kann ohne Layoutbrüche vergrößert werden; Animationen respektieren Nutzerpräferenzen; und alle Nicht-Text-Inhalte haben geplante Textalternativen.