web-dev-qa-db-ja.com

ステータスを示す色付きの円-アクセシビリティガイドラインの違反?

企業のChromeデバイスを管理するためのGoogleのWebベースのユーザーインターフェースを見ています。

各デバイスのステータスは、色付きの円で表されます(下の画像を参照)。

これはアクセシビリティの原則に違反していると思いました。色覚異常を抱えているユーザーは、「良い」状態と「悪い」または「不明」状態を区別できません。

それとも、色覚異常者の大多数がどういうわけか違いを見分けることができるこれらの色について何か特別なものがありますか?

実際に使用される色は、単に「赤」と「緑」という名前のWeb色です。

私が質問している理由は、私たちのチームでは、同じデザイン要素をWebアプリケーションに組み込むことを検討していることです。これは、一般の人々のかなりの割合がこれを使用できなくなるのではないかと心配しています。

Screen shot of Chrome device management showing green/grey circles

Screen shot of Chrome device management showing red/green circles

25
Andrew Shepherd

他の回答が言ったように、色が簡単に区別できない場合、色自体が問題を引き起こす可能性があります。これに対する最も明確な解決策は、色と形状を組み合わせることです。そのため、フルビジョンの人は色ですばやくスキャンできますが、1秒を探すのをやめることでも簡単にアイデアを表示できます。何かのようなもの:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

私が考える最善の解決策は、幾何学的形状(アイコンが中央にある可能性があります)です。良い場合は緑色の円、悪い場合は赤い十字、不明な場合は灰色の三角形。私はこれらをモックアップに含めたでしょうが、私はここのソフトウェアに少し妨げられています!

33
A. Sim

デューテラノピア 、または赤緑の色覚異常は、色覚異常の最も一般的な形態の1つです。他にも多くの形式の colorblindness があり、赤と緑の知覚にも影響を与えます。

あなたが言及したGoogleインターフェイスにアクセスできなければ、色覚異常のユーザーに追加の支援を提供するこれらの色について特別なことは何もないと思います。色覚異常のユーザーは、ドット間の色相の違いを目にする可能性が最も高いですが、赤と緑の色によって伝えられている意味がこれらのユーザーでは失われている可能性が高いです。

ユーザーがいずれかのドットにカーソルを合わせると、色の意味が明らかになりますが、このソリューションは、ドットに加えて、またはドットの代わりにテキストのシステムステータスラベルを使用する場合ほど、すべてのユーザーに表示されません。

9
Andy

WCAGガイドライン1.4.1 (レベルA):

1.4.1色の使用:色は、情報を伝えたり、アクションを示したり、応答を促したり、視覚要素を区別したりするための唯一の視覚的手段としては使用されません。 (レベルA)

したがって、これはアクセシビリティガイドラインへの明確な違反であり、色に基づいていない追加の視覚的手がかりを提供することでうまくいくでしょう。

私のiPhoneは常にグレースケールモードになっていて、Spotifyでシャッフルがオンかオフかわからない-super迷惑で完全に不当。これらのことは、視覚障害のある人にとっては重要ですが、ほとんどありません。男性の9%はある種の色覚異常を持っています。

8
Izhaki

他の人が言ったことに加えて、ここに簡単な修正があります:

enter image description here

ブルーとオレンジを組み合わせて使用​​します。これらは、最も一般的な3つのケースで識別できます。

4
PixelSnader

問題がある場合にのみアイコンを表示することをお勧めします。ユーザーは、警告アイコンがないことを解釈して、アイテムに問題がないことを示します。

「OK」を意味する緑またはアイコンの海は、リーダーが各行の2つの可能性と1つのアイコンの画面をスキャンすることを区別する必要があるため、問題を見つけにくくします。

アイテムに問題がない場合、アイコンはありません。問題のある人にのみフラグを立てます。これにより、混乱が減り、問題を見つけやすくなり、どのアイコンや色を使用するかという質問がなくなります。アラートに使用するアイコンを使用してください(たとえば、三角形の感嘆符)。

0
Eric Stoltz