適用 (対象)
すべての色やテキストをサポートするウェブコンテンツ技術
これは達成基準 1.4.1 (色の使用) (十分な達成方法) に関連する達成方法である。
解説
この達成方法の目的は、フォームの必須項目のように、情報を伝えるために色の違いを用いるとき、色の違いによって伝えている情報をテキストも用いて明示することである。
事例
事例 1: 色でコード化されたスケジュール
技術会議のセッションスケジュールが三つのトラックで構成されている。トラック 1 のセッションが青い背景色で、トラック 2 のセッションが黄色い背景で、トラック 3 のセッションが緑色の背景で示されている。トラック 1 は T1、トラック 2 は T2、トラック 3 は T3 のように、各セッション名に続きテキストでも示されている。
事例 2: 色のアイコンでコード化されたスケジュール
技術会議のセッションスケジュールが三つのトラックで構成されている。各セッションのタイトルの隣には、セッションのトラックを示す番号が中央に付いた色を用いたアイコンがあり、青はトラック 1、黄はトラック 2、緑はトラック 3 であることを示している。それぞれのアイコンには、トラック 1、トラック 2、トラック 3 と適切なテキストによる代替が提供されている。
事例 3: 必須項目のあるフォーム
フォームにいくつかの必須項目がある。必須項目のラベルは赤で示されている。それに加えて、各ラベルの末尾に * (アスタリスク) がある。フォーム入力の説明文では、入力例に続いて、「赤字で * (アスタリスク) の付いた項目は必須項目です。」と示されている。
アスタリスクは、スクリーンリーダー (読み上げモード) によっては読み上げられないことがあり、そしてデフォルトの文字サイズよりも小さいサイズでリンダリングされるため、ロービジョンの利用者にとっては見づらいかもしれない。コンテンツ制作者としては、アスタリスクが用いられていることをテキストで示すとともに、表示されるアスタリスクの文字サイズを大きくすることが重要である。
事例 4: 緑色の送信ボタンのあるフォーム
オンラインのローン申し込みにおいて、緑色のボタンでプロセスを進め、赤色のボタンでプロセスをキャンセルできると説明がある。このとき、フォームは、緑色のボタンにはテキストで「Go」と書かれていて、「緑色の[Go]ボタンを押して結果を送信し、次のステップに進んでください」と指示がある。
検証
手順
情報を伝えるのに色の違いが用いられている各項目に対して:
- 伝えられている情報がテキストでも利用可能であり、そのテキストが条件付きコンテンツでないことを確認する。
期待される結果
- 1.の結果が真である。