Integrieren von Barrierefreiheit in Ihr Design
Lernziele
Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
- Benennen der beiden wichtigsten Kriterien zur Verwendung von Farbe
- Zuordnen geeigneter Farben, Kontraste und Verhältnisse zu Text und Symbolen
- Erklären der möglichen Auswirkungen von Animationen auf die Gesundheit von Benutzern
Die Bedeutung von Farbe
In der ersten Einheit haben Sie erfahren, wie verschiedene Benutzer die Benutzeroberfläche im Großen und Ganzen erfassen und darauf navigieren. In dieser Einheit beschäftigen wir uns mit den Details des Designs. Farbe ist oft integraler Bestandteil des Designs. Sie dient u. a. dazu, Aufmerksamkeit zu erregen, eine Marke zu kennzeichnen, Bedeutung zu vermitteln und Elemente zu gruppieren. Farbe hat zwar viele gestalterische Vorteile, kann aber bei falschem Einsatz Barrieren für Menschen mit Behinderungen schaffen.
Es gibt zwei Hauptbereiche, die hinsichtlich Farbe und Barrierefreiheit zu beachten sind.
- Farbe als Bedeutungsträger
- Kontrast zwischen benachbarten Farben
Farbe als Bedeutungsträger
Obwohl Farbe ein geeignetes Instrument sein kann, dem Inhalt auf dem Bildschirm Bedeutung zu verleihen, sollte es vermieden werden, Farbe allein zur Darstellung von Informationen oder zur Handlungsaufforderung einzusetzen. Die Abbildung zeigt eine Benutzerliste einer Chat-Anwendung und ist ein Beispiel dafür, was besser nicht gemacht werden sollte. In der Liste wird die Anwesenheit der Benutzer durch ein grünes WLAN-Symbol für "Aktiv", ein oranges WLAN-Symbol für "Inaktiv" und ein rotes WLAN-Symbol für "Offline" dargestellt.
1 von 12 Männern und 1 von 200 Frauen sind farbenblind und wären nicht in der Lage zu unterscheiden, ob ihre Kontakte aktiv oder inaktiv sind.
Stattdessen kann der Designer verschiedene Symbole für den jeweiligen Status verwenden, wobei die Farbe die durch das jeweilige Symbol vermittelte Information ergänzt: das grüne WLAN-Symbol für "Aktiv", das graue Schlummersymbol für "Inaktiv" und das rote Offline-Symbol für "Abwesend".
Farbkontrast
Der zweite Aspekt beim Design mit Farbe ist der Kontrast zwischen der Textfarbe und dem Hintergrund, auf dem der Text gezeigt wird. Sie und das für die Erfahrung mit dem Inhalt zuständige Team schreiben großartige Inhalte und möchten sicherstellen, dass die Mehrheit der Benutzer sie sehen kann, einschließlich Menschen mit geringer Sehkraft und Menschen ohne Retina-Displays mit hoher Punktdichte.
Laut Web Content Accessibility Guidelines (WCAG) 2.0 sollte das Kontrastverhältnis zwischen Text und Texthintergrund mindestens 4,5 zu 1 betragen. Wenn Ihre Schrift mindestens 24 px bzw. 19 px fett ist, sinkt das Mindestverhältnis auf 3 zu 1.
Das bedeutet, dass bei einer Textgröße von 24 px, 19 px fett oder größer, das hellste Grau, das Sie auf weißem Hintergrund einsetzen können, #959595 ist, was wie folgt aussieht:
Bei kleinerem Text ist das hellste Grau, das Sie auf einem weißen Hintergrund möglich ist, #767676. Wenn der Hintergrund grau ist, muss der Text dunkler sein, was wie folgt aussieht:
Gemäß WCAG 2.0 sind Logos oder Elemente, die sich gerade in deaktiviertem Zustand befinden, von diesem Standard ausgenommen. Dies schließt inaktive Schaltflächen oder Menüpunkte ein. Platzhaltertext für Formularfelder ist nicht von diesem Standard ausgenommen.
Es ist erwähnenswert, dass die überarbeiteten WCAG 2.1-Regeln mehr Anforderungen an den Farbkontrast stellen. Dazu zählen Kontrastanforderungen für alle visuellen Informationen, die zur Identifizierung von Komponenten und Zuständen auf der Benutzeroberfläche erforderlich sind. Das bedeutet, dass jetzt ein Verhältnis von 3:1 für Elemente wie Eingabefeld- und Schaltflächenbegrenzungen, Fokuszustände und sogar visuelle Teile eines Diagramms erforderlich ist. Betrachten Sie das folgende Dateneingabefeld: 
Der Rand dieses Texteingabefelds muss mindestens ein Kontrastverhältnis von 3:1 zum Seitenhintergrund haben. Da in diesem Fall die Seite weiß ist, darf die Rahmenfarbe nicht heller als #959595 sein.
Online, in Design-Tools und sogar in Tools für Entwickler von Browsern gibt es viele Tools zur Berechnung des Kontrastverhältnisses. Einer unserer Favoriten ist www.AreMyColorsAccessible.com.
Text auf Hintergründen ohne Volltonfarbe
Text auf Bildern oder anderen Hintergründen ohne Volltonfarbe, wie z. B. bei Farbverläufen haben, ist oft schwer lesbar. Zumindest müssen Sie sicherstellen, dass der Text die Farbkontrastanforderungen bei dem Teil des Bilds erfüllt, der der Textfarbe am nächsten liegt: Bei hellem Text den des hellsten Teil des Bilds, bei dunklem Text den des dunkelsten Teils des Bilds. Text auf Hintergründen ohne Volltonfarbe kann sich jedoch negativ auf Benutzer mit kognitiven Einschränkungen wie Dyslexie auswirken. Am besten platzieren Sie den Text auf einem Volltonteil des Bilds oder fügen einen festen Volltonhintergrund zwischen Text und Bild ein.
Hier befindet sich der Überschriftentext "Einstein (10+)" über dem Wolkenbild:
Eine bessere Lösung ist es, den Überschriftentext "Einstein (10+)" in den volltönig blauen Teil des Bildes zu verschieben, statt über das Wolkenbild:
Wenn Sie Text auf nicht volltönigen Hintergründen vorziehen, befolgen Sie diese Leitlinien, um die visuelle und kognitive Belastung der Benutzer zu minimieren:
- Nur Überschriftentext darf sich auf nicht volltönigen Hintergründen befinden. Text sollte mindestens 18 px groß sein und idealerweise nur aus einer Zeile bestehen. Bei längeren Textabschnitten kann die Navigation schwieriger sein, wenn sich der Hintergrund hinter jedem Wort oder jeder Zeile leicht verändert.
- Farbverlaufshintergründe dürfen nur vertikal sein (wobei die Farbe oben anders ist als die Farbe unten). Vermeiden Sie horizontale, diagonale und radiale Verläufe, die die Hintergrundfarbe für jedes Zeichen in einer Zeichenfolge möglicherweise ändern.
- Legen Sie stets eine zusätzliche Hintergrundfarbe fest. Einige Benutzer schalten Hintergrundbilder aus Gründen der Barrierefreiheit aus. Stellen Sie daher sicher, dass der Text auch bei deaktiviertem Hintergrundbild noch lesbar ist und die Kontrastanforderungen erfüllt (4,5:1).
Einzelheiten zur Schriftbreite, Unschärfe von Textschatten und zu anderen technischen Vorschlägen finden Sie in der Leitlinie zu Text auf Hintergründen für das Salesforce Lightning Design System (SLDS).
Verbessern der Benutzererfahrung mit Animationen
Animationen können die Erfahrung für Benutzer mit kognitiven Einschränkungen verbessern. Sie können auch dabei helfen, Benutzern auf einer Benutzeroberfläche Orientierung zu geben, sie zu Handlungsaufforderungen zu lenken und Beziehungen oder Hierarchien zwischen Elementen auf einer Seite zu schaffen. Eine Animation ist jedoch ein zweischneidiges Schwert und kann bei unsachgemäßer Gestaltung bei Benutzern mit Störungen des Gleichgewichtsapparats Kopfschmerzen, Übelkeit, Schwindel oder Gleichgewichtsstörungen verursachen. In manchen Fällen verursachen Animationen bei Menschen mit fotosensibler Epilepsie sogar Anfälle.
Der wichtigste Punkt ist, dass eine nicht barrierefreie Funktion einen Benutzer zwar daran hindern kann, Informationen wahrzunehmen oder ein Produkt zu bedienen, dass aber eine nicht barrierefreie Animation die Gesundheit des Benutzers negativ beeinflussen kann. Die WCAG-Leitlinien haben zwei entscheidende Anforderungen, an die sich das gesamte Web hält.
- Aufblitzen oder blinken. Vermeiden Sie gemäß WCAG 2.3.2 Three Flashes alle Animationen, die mehr als dreimal pro Sekunde aufblitzen oder blinken. Andernfalls können schnell blinkende Animationen bei einigen Ihrer Benutzer zu Anfällen führen.
- Maximal 5 Sekunden. Gemäß WCAG 2.2.2 Pause, Stop, Hide müssen alle Animationen länger als fünf Sekunden oder mit längerer Wiederholung als fünf Sekunden eine Möglichkeit zum Anhalten, Beenden oder Ausblenden der Animation vorsehen.
Unabhängig davon, wie eindrucksvoll und barrierefrei Ihre Animationen sind, das Wichtigste ist, dass Sie den Benutzern die Möglichkeit geben, sie abzuschalten. Das SLDS-Karussell ist ein großartiges Beispiel für eine animierende Komponente mit einer Schaltfläche zum Anhalten.
Vermeiden des Auslösens von Schwindelgefühlen
Es gibt drei Faktoren, die dazu beitragen können, Schwindel, Kopfschmerzen oder andere Formen von Unwohlsein bei bestimmten Benutzern auszulösen.
- Bewegungsumfang relativ zur Bildschirmgröße. Ist die Animation groß oder klein? Größere Animationen können beunruhigender sein als kleinere.
- Nicht übereinstimmende Bewegungsrichtungen. Bei einigen Animationen werden Objekte in entgegengesetzte Richtungen bewegt. Dies ist häufig bei Parallaxen-Effekten der Fall, wenn der Hintergrund sich nach oben bewegt, während der Benutzer auf der Seite nach unten blättert. Diese Animationsstile können für Benutzer sehr desorientierend wirken.
- Zurückgelegte Strecke in der Wahrnehmung des Benutzers. Animationen mit Tiefe, die beispielsweise große Landschaften darstellen, können den Benutzer ebenfalls desorientieren.
Fazit
Farbe, Animation und Bewegung sind wichtige Designtechniken. Wenn Sie mit Farbe und Animationen arbeiten, stellen Sie sicher, dass Sie alternative visuelle Mittel zur Verfügung stellen, um die Informationen, die diese Techniken liefern, zu vermitteln. Achten Sie bei Animationen darauf, Stile zu vermeiden, die bei einem Teil der Benutzer negative gesundheitliche Auswirkungen verursachen können.