色の使用:
達成基準 1.4.1 を理解する
1.4.1 色の使用: 情報を伝える、何が起こるか又は何が起きたかを示す、ユーザの反応を促す、もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない。 (レベルA)
注記: この達成基準は、特に色の知覚に関するものである。その他の知覚形態については、色やその他の視覚的な表現のコーディングへのプログラムによるアクセスも含めて、ガイドライン 1.3で網羅されている。
この達成基準の意図
この達成基準の意図は、色の違いによって伝えられている情報、言い換えれば、それぞれの色には割り当てられた意味があり、その色を使うことによって伝えている情報に、すべての利用者がアクセスできるようにすることである。画像(又は、その他の非テキスト形式)で色の違いによって情報を伝えている場合、色弱の利用者はその色が分からないかもしれない。この場合、色で伝えている情報を他の視覚的な手段で提供することで、色の分からない利用者もその情報を知覚することができるようになる。
色は、感覚的な訴求力、ユーザビリティ、そしてアクセシビリティを高めるため、ウェブコンテンツのデザインにおいて重要なものである。しかし、色を知覚しづらい利用者もいる。ロービジョンの利用者は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。さらに、テキストしか表示しない、色数が制限されている、又はモノクロのディスプレイ及びブラウザを使用している利用者は、色だけで提示されている情報を知覚することができないであろう。
色の違いで伝えられている情報の例としては、「必須項目は赤字」、「赤字はエラー」、そして「赤がメアリーの売上、青がトムの売上」などが挙げられる。何が起こるかを示している例では、リンクが新しいウィンドウで開くことやデータベースの入力内容の更新が成功したことを示すのに色を使っていることがある。また、利用者の反応を促している例には、必須項目が未入力であることを示すためにフォームの入力フィールドを反転表示していることが挙げられる。
注記: この達成基準は、ページ上での色の使用、あるいは他の視覚的な表示と重複していても色分けすることを阻むものではない。
達成基準 1.4.1 の具体的なメリット
ロービジョンの利用者が、色覚の限界を感じることがよくある。
年配の利用者は、色がよく見えないかもしれない。
色弱の利用者が、色で伝えられている情報をその他の視覚的な手段で知覚できるようになる。
テキストしか表示しない、色数の制限された、又はモノクロのディスプレイを使用している利用者は、色に依存している情報を知覚することができないことがある。
達成基準1.4.1 の事例
必須項目を示すために色とテキストを用いている入力フォーム
ある入力フォームには、必須項目と任意項目の両方がある。 入力フォームの先頭にある説明文には、必須項目のラベルが赤字になっていて、「必須」という代替テキストのあるアイコンも付いている。 赤字とアイコンの両方が、フォームのテキストフィールドとプログラムで関連付けられているので、支援技術の利用者はどれが必須項目なのかが判断できる。
試験
学生が、化合物の SVG イメージを見て、図表に用いられている色に基づいてそこにある化学元素を確認している。代替テキストが、各元素の名前と元素の色を関連付けていて、図表内での元素の配置を示している。色を知覚できない学生は、その化合物について同じ情報を得ている。(この実装方法は、ガイドライン 1.1 のレベル A も満たしている。)
使用不可になっているフォーム要素
マークアップ又はスクリプトによって使用不可になっているフォーム要素は、ユーザーエージェントによってグレー表示され、使用できない。使用不可の状態では、これらの要素はフォーカスを受け取らない。支援技術は、使用不可の状態になっている要素をプログラムが解釈することが可能であろう。色の変化及びフォーカスがあたらないことによって、コントロールの状態に関する情報を視覚的に提供している。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
達成基準1.4.1 の実装方法及び不適合事例 - 色の使用
この節にある番号付の項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する実装方法、又は複数の実装方法の組合せを表している。WCAG 2.0 適合要件のすべてが満たされている場合にのみ、次に挙げる実装方法により、この達成基準を満たすことができる。
達成基準を満たすことのできる実装方法
使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の実装方法(又は、実装方法の組合せ)がある。
達成基準 1.4.1 でさらに対応が望まれる実装方法(参考)
適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な実装方法もあわせて検討するとよい。ただし、すべての状況において、すべての実装方法が使用可能、または効果的であるとは限らない。
色を冗長的に使って情報を伝える(リンク追加予定)
達成基準 1.4.1 のよくある不適合事例
以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.1 に適合していないとみなした、よくある不適合事例である。