WCAG 2.0 達成基準 1.4.1 を理解する
なるべく自分の言葉でメモして、自分のものにしようと考えました。なので、正確な情報を得たい方は原典を参照してください。
出典: WCAG 2.0 解説書 色の使用: 達成基準 1.4.1 を理解する
色はウェブコンテンツのデザインにおいて重要なものだが、色を知覚しづらい利用者もいる。ロービジョンの人は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。
達成基準 1.4.1 の事例
- 必須項目を示すために色とテキストを用いている入力フォーム
- 赤字と（テキストによる代替のある）アイコンの両方が、テキストフィールドとプログラム的に関連づけられているので、支援技術の利用者は必須項目を判断できる。
- 試験（代替テキストを用いている SVG 画像）
- 学生は、化学化合物の SVG 画像を見て、図に使用されている色や数字に基づいて、存在する化学の要素を識別する。
- 各要素に関連づけられたテキストによる代替は、要素の色に名前をつけて、図で要素の位置を示している。なので、色を知覚できない学生は、クラスメートと同じように、化合物に関する同じ情報を得る。
- 使用不可になっているフォーム要素
- マークアップまたはスクリプトによって使用不可になっているフォーム要素は、ユーザエージェントによってグレーアウトされ、使用できない。使用不可の状態では、これらの要素はフォーカスを受け取らない。
- 支援技術は、使用不可の状態になっている要素をプログラムが解釈できる。
十分な達成方法
色を使って情報を伝えようとしている場合:
- G14: 色の違いで伝えている情報をテキストでも入手可能にする
- 色でコード化されたスケジュール: スケジュールが 3 つのトラックで構成されていて、トラックごとに色分けされているとき、T1、T2、T3 のように、各セッション名に続きテキストでも示されている。
- 色のアイコンでコード化されたスケジュール: スケジュールが 3 つのつのトラックで構成されていて、色を用いたアイコンで区別されているとき、それぞれのアイコンには、トラック 1、トラック 2、トラック 3 のように、テキストによる代替が提供されている。
- G205: 色のついたフォームコントロールのラベルに対して、テキストによる手がかりを含める
- オンラインフォームで、「必須項目は赤で示され、(required) とマークされている」と指示されている。「(required)」というという手がかりが label 要素の中に含まれる。
- G182: 文字色の違いで情報を伝えようとするときは、利用可能な追加の視覚的な手がかりを確保する
- リンクを色で識別するとき、下線とともに表示する。
- リンクとその補足があり、色分けで区別されているとき、リンクをその他のテキストよりも大きなフォントで提示する。
- G183: 色が単独でリンクやコントロールを特定するときは、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンクまたはコントロールのフォーカスに追加の視覚的な手がかりを提供する
- 利用者がカーソルを合わせるか Tab キーでリンクに移動して、フォーカスするとき、色の相対輝度の差を 3:1 かそれ以上にし、（それだけでは全色盲の人々にはわからないかもしれないため）アンダーラインなどの視覚的なハイライトを加える。
情報を伝える画像の中で色を用いている場合:
- G111: 色とパターンを併用する
- 棒グラフの棒が、異なる色とパターンで表示されている。凡例もそれぞれの棒が識別できるように、同じ色とパターンが使用されている。
- 交通システムのオンライン地図に、路線が色分けされている時、それぞれの路線上の停車場はひし形、正方形または円など、区別しやすいアイコンにする。
- G14: 色の違いで伝えている情報をテキストでも入手可能にする
- 既存の同項目を参照
よくある失敗例
- F13: 画像が色の違いを使って情報を伝えていても、テキストによる代替がその情報を伝えていない
- テキストによる代替に、「営業部の年間売上額を示す棒グラフ。メアリー 310 万 ドル、フレッド 260 万ドル、ボブ 220 万ドル、そしてアンドリュー 340 万ドル。赤い棒は、年間のノルマを達成できなかったことを示している。」と書かれていたとき、「けっきょく赤い棒って何！？」となる。色を説明するのではなく、誰が年間のノルマを達成できなかったのかを示すべきである。
- F73: 色覚なしでは視覚的にはっきりとわからないリンクを作成する
- 下線のないリンクがあり、色以外に別の視覚的な手がかりを提供していない。
- F81: 色の違いだけで、必須又はエラーフィールドを特定している
- 必須項目であることを示すために、「電話番号」というラベルが赤のテキストだけで示されている。これでは、全盲あるいは色覚異常の利用者は、「電話番号」が必須項目であることを確認できない。