📘
【WCAG2.1の達成基準を咀嚼する】1.4.1 色の使用
これは何？
WCAG2.1のガイドライン中で示されている達成基準を、フロントエンドエンジニア視点でざっくりと噛み砕いてまとめたものです。
この記事では、達成基準 1.4.1 色の使用 について記載しています。
参考
- https://waic.jp/translations/WCAG21/#use-of-color
- https://waic.jp/translations/WCAG21/Understanding/use-of-color.html
「達成できている」と言える状態
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
色によって何らかの情報を伝えている場合、色覚異常の利用者はその色が分からないかもしれない。
そのような事態を避けるため、色で伝えている情報を他の視覚的な手段で提供する必要がある。
色だけで情報を伝えている例
- 「必須項目は赤字」という説明
- 「赤がメアリーの売上、青がトムの売上」という説明
- 下線が引かれていないテキストリンク
- 必須項目未入力時の、フォームの入力フィールドの反転表示 など
補足
この達成基準は、色に意味を割り当てられていること自体を否定するものではない。
ただ、色覚多様性で「正しく意味を判別できない」ケースもあるため、色「だけ」ではない別の手段での情報提供を求めている。
メリット
・ロービジョンの利用者が、色覚の限界を感じることがよくある。
・年配の利用者は、色がよく見えないかもしれない。
・色覚異常の利用者が、色で伝えられている情報をその他の視覚的な手段で知覚できるようになる。
・色数の制限されたモノクロのディスプレイを使用している人は、色に依存している情報を利用できないことがある。
・色の識別に問題を抱える利用者が、テキストの手がかりを見たり、聞いたりすることができる。
・点字ディスプレイ又は他の触覚インタフェースの人が、タッチすることでテキストキューを検出できる。
引用箇所に記載の通り。
なお、日本での先天赤緑色覚異常の発生頻度は、男性では20人に1人、女性では500人に1人の割合と言われており、決してまれではない。
具体的な達成方法
UI設計時に、色だけに依存しないよう注意を払う必要がある。
具体的には以下の点に考慮しなければならない。
- 色の違いで伝えている情報をテキストでも入手可能にする
- 色のついたフォームコントロールのラベルに対して、テキストによる手がかりを含める
- 文字色の違いが情報を伝えるために使用される場合に、利用可能な追加の視覚的な手がかりを確保する
- 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供する
Discussion