Wenn wir über Barrierefreiheit sprechen, reden alle, die als Designer arbeiten, gerne über Farben. Ironischerweise verstehen jedoch nur wenige, wie man sie wirklich zugänglich macht.
In diesem Video werde ich einige wichtige Punkte auflisten, um Farben auf eine zugängliche Weise zu verwenden, und ich werde auch einige Tipps geben, um häufige Fehler zu vermeiden, die auftreten, wenn das Team wächst und das Produkt skaliert wird.
〰️
➽ Unterstützendes Material:
〰️
➽ Videobeschreibung:
Der Hintergrund sieht aus wie Papier. Im Verlauf der Erzählung gibt es einige animierte Texte und Bilder, die visuelle Unterstützung für die Rede bieten. Außerdem gibt es im Video einige Sätze, die als „Maris Tipps“ bezeichnet werden. Nicht alle wurden im Audio erwähnt, da das Video sonst zu lang wäre. Daher werde ich alle Tipps auflisten:
- Um die Implementierung zu vermeiden, denken Sie daran, alle getesteten und genehmigten Kombinationen zu dokumentieren.
- Haben Sie gesehen, wie schwer es ist, den Unterschied nur mit Farben zu erkennen? Das beeinträchtigt die Erfahrung für Menschen mit Achromatopsie und Menschen mit kognitiven Beeinträchtigungen… Ich benutze Colorblindly, um diesen Test durchzuführen (Link in der Beschreibung). In diesem Moment gibt es einige Bilder, die die normale Visualisierung und die Graustufen für eine Tab-Komponente vergleichen, die nur Farben und eine andere Farbe + Unterstrich verwenden.
- Bei der Gestaltung digitaler Produkte ist es keine Modenschau, um die seltsamsten Dinge zu präsentieren! Die Benutzeroberfläche muss einfach und benutzerfreundlich sein, wie Ihre Arbeitskleidung für zu Hause! Wenn Sie Ihre künstlerische Ader ausleben möchten, suchen Sie sich stattdessen ein Hobby. Außerdem gibt es ein Foto eines extravaganten Modells und den Satz: „Niemand trägt das an Arbeitstagen“!
- Bevor Sie tausende interne Konfigurationen erstellen, machen Sie das Wesentliche und machen Sie es gut! Stellen Sie sicher, dass alle Optionen, die die Person auf dem Gerät oder im Browser eingestellt hat, korrekt funktionieren. Weitere Details im unterstützenden Material.
〰️
➽ Werkzeuge zur Unterstützung bei den Farbzugänglichkeitstests:
〰️
➽ Empfehlungen zu Farben:
WCAG, Verständnis des Erfolgskriteriums 1.4.1: Verwendung von Farbe:
WCAG, Verständnis des Erfolgskriteriums 1.4.6: Kontrast (Erweitert):
GAIA, Empfehlung 1 - Visuelles und Textuelles Vokabular:
Gaia, Empfehlung 5 - Anpassung:
〰️
➽ Hausaufgabe:
Überprüfen Sie die Bildschirme Ihres letzten Projekts und suchen Sie nach Fehlern im Zusammenhang mit der Farbzugänglichkeit, und beheben Sie mindestens einen davon.
Fühlen Sie sich frei, dieses Video in einem Büromitglied zu reproduzieren, um heute eine Diskussion über dieses Thema zu starten.
〰️
Danke fürs Zuschauen. Ich hoffe, dieses Video war nützlich für Sie!