ūüĆą Op Ein Meinungsbildner

Veröffentlicht

(20. März 2020)

Im gesamten Web k√∂nnen Designer und Ingenieure besser bauen, um die Barrierefreiheit zu gew√§hrleisten. Bei Wistia war das neueste Update f√ľr unseren Videoplayer ein gro√üer Fortschritt. Verbesserungen wurden vorgenommen, um ihn bildschirmleserfreundlich, √ľber die Tastatur navigierbar und in der Lage zu machen, Audiobeschreibungen zu unterst√ľtzen.

Ein Farbwähler mit aktiviertem Kontrollkästchen

Aber So fantastisch und talentiert das Team hier auch ist, es gibt einige Aspekte der Barrierefreiheit von Videos, die wir hinter den Kulissen einfach nicht beheben k√∂nnen. Es liegt immer noch an den Videok√ľnstlern, Bildunterschriften zu bestellen, ihren Miniaturbildern beschreibenden Alternativtext hinzuzuf√ľgen und die Farbe ihres Players auszuw√§hlen, die zu ihrer Marke passt. Und diese Auswahl hat einen gro√üen Einfluss auf die Barrierefreiheit, da eine helle Hintergrundfarbe Text und Symbole bis zur Unleserlichkeit kontrastarm machen kann.

Die Kontrolle √ľber das Erscheinungsbild des Players ist eine der M√∂glichkeiten Funktionen, die unsere Kunden am h√§ufigsten als Grund f√ľr die Wahl von Wistia nennen, aber es ist auch eine Wahl, die den Zugriff erheblich beeintr√§chtigen kann, ohne dass sie merken, worum es geht.

Um dieses Problem zu lösen, haben wir uns vorgenommen Entwerfen eines Farbwählers, der die Auswahl der Barrierefreiheit erleichtert.

Um eine Nummer darauf zu setzen, m√ľssen Sie mit m√∂glichst wenigen Klicks eine fundierte Auswahl treffen. Auf der Suche nach einer einfachen, reibungsarmen Benutzeroberfl√§che f√ľr die Farbauswahl haben wir eine Bestandsaufnahme der Millionen (?) Verschiedene M√∂glichkeiten zur Farbauswahl vorgenommen. Warum sind all diese unterschiedlich? Warum gibt es keinen Standard f√ľr Farbw√§hler? Und was ist der Unterschied zwischen „Helligkeit“ und „Helligkeit“?

Viele verschiedene Farbwähler mit unterschiedlichen Layouts und Strukturen des Farbraums

Die Antwort liegt im dreidimensionalen Farbraum. Das hei√üt, um alle m√∂glichen Farben genau darzustellen, ben√∂tigen Sie eine dreidimensionale Form. Das Modell, das am direktesten unseren Farbinstinkten entspricht, ist HSV: Farbton (der Fleck auf dem Regenbogen), S√§ttigung (Reinheit dieses Farbtons im Vergleich zu der Tr√ľbung des Farbtons in Grau), Wert (Helligkeit dieses Farbtons im Vergleich zu Wei√ü oder schwarz). Jede dieser drei Variablen ist eine notwendige Dimension zum Definieren einer auf einem Bildschirm angezeigten Farbe.

Dreidimensionale Formen, die den Farbraum darstellen: a Spalte, Kegel, W√ľrfel und Kugel
Unterhaltsame Tatsache: Die Hex-Werte von Farben werden nicht dem HSV, sondern (dem weniger intuitiven) RGB zugeordnet. Jedes der drei Zeichenpaare repr√§sentiert einen roten, blauen oder gr√ľnen Farbkanal in hexadezimaler Schreibweise (Basis 16), sodass #FF FF FF wei√ü ist, da alle drei Zeichen wie die Mitte des Bildes dieses W√ľrfels maximal sind. wohingegen #FF 00 00 rot ist, weil nur der R-Kanal maximal ist. Die linke Seite dieses W√ľrfels enth√§lt also alle Farben, die Sie erhalten k√∂nnten, wenn Sie nur den R-Kanal √§ndern und die letzten vier Zeichen Ihres Hex-Codes FF FF bleiben.

So ordentlich es w√§re, wenn Benutzer ihre Farbe ausw√§hlen, indem sie in einer dreidimensionalen Welt zu der (x, y, z) -Koordinate navigieren, die am besten zu ihrer Marke passt. es w√ľrde nicht zu wenigen Klicks und schnellen, guten Entscheidungen f√ľhren. Der Grund, warum es so viele Farbw√§hler gibt, ist, dass ein gewisses Ma√ü an Abstraktion erforderlich ist, um diesen dreidimensionalen Farbraum auf eine zweidimensionale Benutzeroberfl√§che zu reduzieren. Aus diesem Grund haben alle Farbw√§hler mindestens zwei (manchmal drei) Achsen zur Auswahl – der Benutzer muss seine x, y und z ausw√§hlen. ihren Farbton, ihre S√§ttigung und ihren Wert. F√ľr unser Designteam bedeuten diese Entscheidungen zus√§tzliche Klicks. Um diese Klicks zu minimieren, haben wir uns gefragt, welche am wichtigsten und am wenigsten wichtig sind.

Die Auswahl eines Farbtons ist der wichtigste Klick. Das Auswählen der Sättigung ist der am wenigsten wichtige Klick.

Der Farbton ist das erste, woran wir denken, wenn wir √ľber die Auswahl einer Farbe nachdenken. Und im Zusammenhang mit der Anpassung eines Videoplayers an eine Markenfarbe ist die S√§ttigung das Letzte , an das wir denken. Das liegt daran, dass die meisten Markenfarben voll ges√§ttigt sind, und selbst wenn dies nicht der Fall ist, denken Sie wahrscheinlich immer noch so √ľber sie. Das bedeutet, dass viele Benutzer niemals m√∂chten, dass die S√§ttigung nur 100 betr√§gt. Wenn dies ein eigener Klick ist, k√∂nnen wir diesen Klick m√∂glicherweise vermeiden. Damit bleiben nur Farbton und Wert zur Auswahl, die die Achsen eines zweidimensionalen Felds sein k√∂nnen und mit einem einzigen Klick ausgew√§hlt werden k√∂nnen.

Ein Farbwähler mit zwei Abschnitten, der erste eine Matrix aus Farbton und Helligkeit, der zweite ein Spektrum mit der Bezeichnung Sättigung
Mit einem einzigen Klick wählt der Benutzer Farbton und Helligkeit aus. Der zweite Klick zum Verringern der Sättigung ist häufig nicht erforderlich.

Siehe! A. Farbauswahl mit einem Klick. Aber was ist mit der Zug√§nglichkeit? Wir k√∂nnen Hilfetext hinzuf√ľgen, der erkl√§rt, warum Kontrast wichtig ist (wir tun das) und das berechnete Kontrastverh√§ltnis anzeigen und ob dies dem Standard entspricht (wir tun das auch), aber die zu erledigende Arbeit ist immer noch die Wahl . Unsere Benutzer m√ľssen verstehen, woraus sie ausw√§hlen m√ľssen, ohne den Kontext des gesamten Optionsspektrums zu verlieren. Schlie√ülich sind Farbw√§hler kompliziert genug, und es ist einfacher, sich mit dem Geschehen zu besch√§ftigen, was gerade passiert.

Ein animiertes GIF des Farbw√§hlers, das vom vollen Spektrum zu einem begrenzten Spektrum nur kontrastreicher Farben √ľbergeht.

Unsere L√∂sung f√ľgt einen Klick hinzu, aber nur einer. Wenn Sie auf das Kontrollk√§stchen klicken, maskiert die Auswahl alle Werte, die keinen ausreichenden Kontrast zu den Steuerelementen des wei√üen Players erzeugen, um als zug√§nglich zu gelten. Wenn Ihre vorherige Einstellung nicht in den akzeptablen Bereich f√§llt, bleibt der Farbton gleich und die Helligkeit f√§llt auf den h√∂chsten akzeptablen Wert.

Die Berechnung basiert auf den Berechnungen der Web Content Accessibility Guild , auf dessen AA-Standard wir unsere Barrierefreiheitsarbeit st√ľtzen. Von dort aus integrieren wir einen zus√§tzlichen Helligkeitsfaktor, um die 80\% ige Deckkraft des Wistia-Players zu ber√ľcksichtigen. Das bedeutet, dass das Szenario mit dem geringsten Kontrast, wenn der Player √ľber reinem Wei√ü liegt, immer noch einen ausreichenden Kontrast ergibt.

Dieser Farbw√§hler ist nur ein kleiner Teil unseres Tools f√ľr Barrierefreiheit, das f√ľr jeden eine Checkliste enth√§lt Video und hilfreiche Tooltips w√§hrend des gesamten Anpassungsprozesses erl√§utern, wie sich unterschiedliche Auswahlm√∂glichkeiten auf die Barrierefreiheit auswirken. Ein Gro√üteil dieser Arbeit wird von Wistia hinter den Kulissen geleistet. Wir f√ľhren die Benutzer jedoch durch die Einstellungen, die sie anpassen m√ľssen, um die Barrierefreiheit zu vereinfachen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.