（2020年3月20日）

Web全体で、デザイナーとエンジニアはアクセシビリティを念頭に置いて構築するのが上手になっています。 Wistiaでは、ビデオプレーヤーの最新の更新は大きな前進であり、スクリーンリーダーに対応し、キーボードでナビゲートでき、音声ガイドをサポートできるように改善されました。

ただし、ここのチームと同じくらい素晴らしくて才能がありますが、ビデオのアクセシビリティには、舞台裏で修正できない側面がいくつかあります。キャプションを注文し、サムネイル画像に説明的な代替テキストを追加し、ブランドに合ったプレーヤーの色を選択するかどうかは、動画クリエイター次第です。また、背景色が薄いとテキストやアイコンのコントラストが低くなり、判読できなくなる可能性があるため、この選択はアクセシビリティに大きな影響を与えます。

プレーヤーのルックアンドフィールの制御はその1つです。 Wistiaを選択する理由としてお客様が最も言及している機能ですが、問題に気付かずにアクセスに深刻な影響を与える可能性がある選択肢でもあります。

この問題を解決するために、私たちは着手しました。アクセシビリティを簡単に選択できるカラーピッカーを設計します。

数字を付けるということは、できるだけ少ないクリックで情報に基づいた選択を行うことを意味します。色を選ぶための簡単で摩擦の少ないUIを探して、色を選択するための数百万（？）のさまざまな方法を検討しました。なぜこれらすべてが違うのですか？カラーピッカーの標準がないのはなぜですか？また、「明度」と「明るさ」の違いは何ですか？

答えは3次元の色空間にあります。つまり、考えられるすべての色を正確に表現するには、3次元の形状が必要です。色に関する私たちの本能に最も直接的にマッピングされるモデルは、HSVです：色相（虹のスポット）、彩度（その色相の純度と灰色に変わる濁り）、値（その色相の明るさと白に溶け込む）または黒）。これらの3つの変数はそれぞれ、画面に表示される色を定義するために必要な次元です。

ブランドに最適な（x、y、z）座標に3次元の世界をナビゲートして、ユーザーに色を選択させるのと同じくらいきれいです。 数回のクリックと、すばやく適切な選択が行われることはありません。カラーピッカーが非常に多い理由は、その 3次元色空間を取得して 2次元UI に縮小するにはある程度の抽象化が必要なためです。そのため、すべてのカラーピッカーには少なくとも2つ（場合によっては3つ）の軸があります。ユーザーはx、y、zを選択する必要があります。それらの色相、彩度、および値。そして私たちのデザインチームにとって、これらの選択は余分なクリックを意味します。これらのクリックを最小限に抑えるために、最も重要なものと最も重要でないものを自問しました。

色相の選択が最も重要なクリックです。彩度を選ぶことは最も重要でないクリックです。

色を選ぶことを考えるとき、色相は私たちが最初に考えることです。そして、ビデオプレーヤーをブランドの色に一致させるという文脈では、彩度は私たちが考える最後のものです。これは、ほとんどのブランドカラーが完全に彩度が高く、そうでない場合でも、おそらくそのように考えているためです。つまり、多くのユーザーは彩度が100以外になることを決して望んでおらず、それがそれ自体のクリックである場合、それは潜在的に回避できるクリックです。これにより、選択できる色相と値のみが残ります。これは2次元フィールドの軸であり、シングルクリックで選択できます。

見よ！ Aワンクリックで色を選択できます。しかし、アクセシビリティはどうですか？コントラストが重要である理由を説明するヘルパーテキストを追加し（これを行います）、計算されたコントラスト比とそれが標準を満たしているかどうかを示します（これも行います）が、実行する作業は依然として選択。ユーザーは、あらゆるオプションのコンテキストを失うことなく、何を選択する必要があるかを理解する必要があります。結局のところ、カラーピッカーは十分に複雑であり、何が起こっているかを頭で包むのは、何が取り除かれているのかを示すアニメーションで簡単になります。

私たちのソリューションはクリックを追加しますが、 1。チェックボックスをクリックすると、ピッカーは、アクセス可能と見なされる白いプレーヤーコントロールに対して十分に高いコントラストを作成しない値をマスクします。以前の設定が許容範囲に収まらない場合、色相は同じままで、明度は許容可能な最高レベルまで低下します。

計算は、Web Content AccessibilityGuildによって提供された計算に基づいています。 、そのAA標準は、アクセシビリティ作業の基礎となっています。そこから、Wistiaプレーヤーの80％の不透明度を説明するために、追加の明度係数を組み込みます。つまり、プレーヤーが真っ白にオーバーレイされた場合でも、コントラストが最も低いシナリオでも十分なコントラストが得られます。

このカラーピッカーは、アクセシビリティツールのごく一部であり、すべてのチェックリストが含まれています。さまざまな選択がアクセシビリティにどのように影響するかを説明する、カスタマイズプロセス全体のビデオと役立つツールチップ。その作業の多くは舞台裏でWistiaによって行われていますが、ユーザーが調整する必要のある設定をガイドすることで、アクセシビリティを簡単に選択できるようにしています。