Barrierefreies UX/UI-Design: So gestaltet ihr Websites für alle Nutzer

Nutzt die Barrierefreiheit als Chance!

Wie oft hat sich jede:r von uns schon über unbegründete Fehlermeldungen oder über Videos geärgert, die unerwartet und mit voller Lautstärke automatisch starten? Solche Erlebnisse führen oft dazu, dass man die entsprechende Website frustriert wieder verlässt. 

Dass es auch anders geht, beweist ein gutes, weil barrierefreies Design. Es führt zu einer optimalen User Experience, die längere Verweildauern, geringere Absprungraten und mehr Interaktionen zur Folge hat. Alles Faktoren, die übrigens auch von Google als positive Signale für die Bewertung einer Website herangezogen werden. 

Wusstet ihr, dass fast 10% der Menschen in Deutschland (laut statistischem Bundesamt) eine anerkannte Schwerbehinderung haben? Dazu kommen ältere Menschen und Personen mit temporären Einschränkungen, denen Websites ebenfalls oft zu schaffen machen. Ohne ein angepasstes Design verpasst ihr also die Chance, diese fast 30% anzusprechen und ihnen die Möglichkeit für ein hürdenloses Nutzungserlebnis zu schaffen.

Praktische Umsetzung der vier WCAG-Standards

Beim Designen von Benutzeroberflächen solltet ihr immer die vier Prinzipien der Barrierefreiheit im Kopf haben, denn die bilden das Grundgerüst einer barrierefreien Anwendung: 

Wahrnehmbarkeit 
Bedienbarkeit 
Verständlichkeit 
Robustheit

Im Folgenden zeige ich euch, welche Maßnahmen besonders wichtig sind und wie ihr Websites oder Apps WCAG-konform gestalten könnt.

1. Wahrnehmbarkeit

Wahrnehmbarkeit ist der erste Grundsatz in den WCAG und stellt sicher, dass Inhalte für alle Nutzer – auch mit sensorischen Einschränkungen – zugänglich sind. In der Praxis heißt das: Inhalte sollten so gestaltet sein, dass sie in verschiedenen Formen dargestellt werden können.

Individuelle Skalierbarkeit von Texten

Neben der Bereitstellung von Untertiteln und Alt-Texten, solltet ihr den Benutzern die Möglichkeit geben, Schriftgrößen und Bilder selber anzupassen, ohne dass dabei etwas vom Inhalt verloren geht. 

Ob das Ganze funktioniert, lässt sich einfach testen, indem man die Zoom-Option des Browsers verwendet. Eine im Designprozess sorgfältig geplante Responsiveness mit definierten Breakpoints ermöglicht hier die optimale Anordnung der Elemente.

Unser Projekt mit der DHZB Akademie zeigt, wie eine optimale Umsetzung der Zoom-Funktion aussehen kann. Selbst bei 200 % Zoom bleiben alle Elemente sinnvoll angeordnet und vollständig funktionsfähig. Der Button wird nach oben verschoben, um im Sichtfeld zu bleiben, während sich die Navigationsleiste zu einem Burger-Menü verändert.

Selbst bei 200 % Zoom bleiben alle Elemente sinnvoll angeordnet und vollständig funktionsfähig. Der Button wird nach oben verschoben, um im Sichtfeld zu bleiben, während sich die Navigationsleiste zu einem Burger-Menü verändert.

Angemessener Farbkontrast

Auch die Unterscheidbarkeit einzelner Elemente ist ein wichtiger Punkt für eine optimale Wahrnehmung. Hier liegt es an euch als UI-Designer visuelle Elemente so zu gestalten, dass sie einen ausreichenden Farbkontrast aufweisen. Das erhöht die Zugänglichkeit und Lesbarkeit für alle Nutzer – unabhängig von individuellen Einschränkungen – auch bei schwierigen äußeren Bedingungen wie hellem Lichteinfall oder Reflexionen. 

Die WCAG enthalten klare Richtlinien zum erforderlichen Kontrast und zur optimalen Lesbarkeit. Mithilfe verschiedener Tools könnt ihr diese Kontrastwerte messen und überprüfen, um sicherzustellen, dass die Vorgaben eingehalten werden. Für ein effizientes Arbeiten sollte eine solche Überprüfung am besten schon im Anfangsstadium des Webdesign-Prozesses stattfinden.

Der linke Button hat einen Kontrastwert von 3.24:1, während der rechte einen Wert von 8.15:1 aufweist. Da der Button-Text kleiner als 19 px ist, muss der Kontrast mindestens 4.5:1 betragen, um die meist empfohlene WCAG-Konformitätsstufe AA zu erfüllen.

Beim kompletten Neustart eines Projekts ist es empfehlenswert, direkt eine barrierefreie Farbpalette zu entwickeln. Ihr könnt so festlegen, welche Farben in welchen Kombinationen verwendet werden dürfen. Dabei sind Farbmatrix-Tools eine hilfreiche Unterstützung, um ungeeignete Kombinationen zu identifizieren und stattdessen optimale Kontraste zu ermitteln.

2. Bedienbarkeit

Der zweite WCAG-Grundsatz – die Bedienbarkeit – stellt sicher, dass die Navigation und Bedienung für alle Nutzer möglich ist.

Tastaturbedienbarkeit

Eine barrierefreie Website sollte nicht nur per Maus, sondern auch ausschließlich über die Rechner-Tastatur bedienbar sein. Das bedeutet: Alle interaktiven Elemente wie Links, Schaltflächen und Formulare müssen über das Keyboard erreichbar sein.

Das geht besser: Trade Republic muss hingegen noch etwas tun. Teile der Website können teilweise oder gar nicht ohne Maus bedient werden. So klappt’s: Bei unserer für die METRO FS gestalteten Website lassen sich sämtliche Links und Inputfelder mit der Tab-Taste anwählen und mit der Enter-Taste auswählen.

Button-Größe

Es dürfte für die meisten von euch keine Überraschung sein, dass Buttons ausreichend groß sein müssen, damit Benutzer problemlos mit ihnen interagieren können. Doch sogar hier gibt es einige Hürden. 

Buttons sollten mindestens 24 x 24 Pixel groß sein. Wichtig dabei: Es muss möglich sein, ein 24 x 24 Pixel großes Quadrat innerhalb der Schaltfläche so zu platzieren, dass es vollständig von ihr umschlossen wird. Bei Buttons mit abgerundeten Ecken bedeutet das, dass sie etwas größer als die besagten 24 x 24 Pixel sein müssen, um diese Anforderung zu erfüllen. 

Es gibt allerdings auch Ausnahmen: Bei ausreichendem Abstand zur nächsten Schaltfläche kann auch ein kleinerer Button konform sein. Das lässt sich prüfen, indem man einen Kreis mit 24 CSS-Pixeln Durchmesser über das zu kleine Ziel zeichnet. Überschneiden sich die Kreise nicht, sind die Buttons trotz geringerer Größe konform.

Links füllt der Button die 24×24 px große Schaltfläche nicht vollständig aus und ist daher eigentlich nicht konform. Wenn jedoch ausreichend Abstand zu benachbarten Buttons besteht, kann er dennoch den Anforderungen entsprechen. Rechts ist der Button größer als 24x24px und erfüllt damit die Größen-Anforderungen in jedem Fall.

3. Verständlichkeit

Der nächste große Bereich in den WCAG ist die Verständlichkeit. Hier geht es darum, Informationen so zu gestalten, dass sie klar und intuitiv zugänglich sind.

Eindeutiger Button-Text

Eindeutig formulierte Button-Texte sind entscheidend, um Nutzern klare Anweisungen zu geben und Verwirrung zu vermeiden. Ein gut gewählter Button-Text sollte präzise vermitteln, was der nächste Schritt ist oder wohin der Klick führt. Dadurch wird die User Experience verbessert und der Nutzer weiß sofort, was ihn erwartet.

„Weiter“ als Button-Text ist hier keine gute Formulierung, da keine Informationen darüber geliefert werden, wohin der Klick führt oder was damit bestätigt wird. Eine präzise Option wäre hier „Registrieren und fortfahren“.

Status für interaktive Elemente

Ein Aspekt, der auch im ersten UI-Design berücksichtigt und definiert werden sollte, sind die verschiedenen Zustände von interaktiven Elementen. Diese Zustände können den Nutzern wertvolle Hinweise geben. 

Besonders bei Formularen sind gut gestaltete Fehlermeldungen essentiell. Pflichtfelder sollten klar als solche erkennbar sein, und bei fehlerhaften oder unvollständigen Eingaben sollten eindeutige, leicht verständliche Fehlermeldungen erscheinen, die konkrete Anleitungen zur Korrektur des Fehlers liefern.

Die Fehlermeldung sollte dem Nutzer deutlich machen, wo das Problem liegt und so formuliert sein, dass dieser den Fehler eigenständig beheben kann.

4. Robustheit

Der vierte und letzte Grundsatz der WCAG ist die Robustheit. Sie soll gewährleisten, dass Webinhalte von einer Vielzahl von Technologien zuverlässig interpretiert und genutzt werden können. Das ist vor allem ein technisches Thema, aber auch im Design kann man schon darauf achten, dass zum Beispiel Überschriften in der richtigen Reihenfolge (H1, H2 etc.) strukturiert sind, um die Navigation zu erleichtern.

Zwei meiner persönlichen Lieblings-Tools zur Umsetzung der Accessibility-Standards

A11y – Color Contrast Checker

Ich bin ein großer Fan von Figma-Plugins, die den Arbeitsprozess optimieren, und der A11y – Color Contrast Checker gehört darum definitiv auf meine Liste. Dieses Plugin ermöglicht es, die Kontraste eurer Entwürfe direkt auf WCAG-Konformität (AA und AAA) zu prüfen, indem ihr einfach ein Artboard auswählt. Zusätzlich könnt ihr mit Schiebereglern passende Farbkontraste definieren. Dabei werden die Farben im Entwurf in Echtzeit angepasst, sodass die Auswirkungen von Änderungen sofort sichtbar und beurteilbar werden.

Contrast Grid

Ein ebenfalls hilfreiches Figma-Plugin zum selben Thema ist Contrast Grid. Dieses Tool erstellt eine Farbmatrix basierend auf eurem Farbsystem und zeigt, welche Farbkombinationen gemäß den verschiedenen WCAG-Konformitätsstufen zulässig sind. Besonders praktisch ist, dass ihr diese Matrix während des Designprozesses jederzeit im Blick behalten könnt. So lässt sich Barrierefreiheit von Anfang an gezielt umsetzen.

Accessibility Audit: Macht unbedingt den Check!

Die Punkte in meinem Überblick sind ein guter Einstieg, doch für eine vollständige WCAG-Konformität müssen weitere Maßnahmen ergriffen werden. Fällt euer Unternehmen unter das Barrierefreiheitsstärkungsgesetz, seid ihr verpflichtet, eure Website bis Ende Juni 2025 barrierefrei gemäß den WCAG-Richtlinien zu gestalten. 

Doch auch wenn ihr (noch) nicht betroffen seid, lohnt sich ein Accessibility-Check auf jeden Fall: Ihr könnt euren Beitrag zur Inklusion leisten, eure Website für alle Nutzer optimieren und damit von Wettbewerbsvorteilen profitieren. 

Die Prüfung könnt ihr selbst übernehmen oder von einer Agentur durchführen lassen. Der Vorteil einer Agentur: Sie bietet nicht nur eine detaillierte Analyse und verständliche Handlungsanweisungen, sondern kann die identifizierten Barrieren auch schnell für euch aus dem Weg räumen.

Die genannten Punkte sind ein guter Einstieg, doch für eine vollständige WCAG-Konformität sind weitere Maßnahmen notwendig. Fällt dein Unternehmen unter das Barrierefreiheitsgesetz, bist du verpflichtet, deine Website bis Juni 2025 barrierefrei gemäß den WCAG-Richtlinien zu gestalten. Doch auch wenn du noch nicht direkt betroffen bist, lohnt sich ein Accessibility-Check: Du kannst deinen Beitrag zur Inklusion leisten und gleichzeitig ermöglicht es dir, deine Website für alle Nutzer zu optimieren und damit von Wettbewerbsvorteilen zu profitieren. Die Prüfung kannst du selbst übernehmen oder von einer Agentur durchführen lassen. Der Vorteil einer Agentur: Sie bietet nicht nur eine detaillierte Analyse und verständliche Erklärungen, sondern kann auch direkt die identifizierten Barrieren für dich beheben.