WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

G14: 色の違いで伝えている情報をテキストでも入手可能にする

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

すべての色やテキストをサポートするウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、フォームの必須項目のように、情報を伝えるために色の違いを用いるとき、色の違いによって伝えている情報をテキストも用いて明示することである。

事例

事例 1: 色でコード化されたスケジュール

技術会議のセッションスケジュールが3つのトラックで構成されている。このとき、トラック 1のセッションが青い背景色で、トラック 2のセッションが黄色い背景で、トラック 3のセッションが緑色の背景で示されているならば、トラック 1はT1、 トラック 2はT2、トラック 3はT3のように、各セッション名に続きテキストでも示されている。

事例 2: 色のアイコンでコード化されたスケジュール

技術会議のセッションスケジュールが3つのトラックで構成されている。各セッションのタイトルの隣りに 色を用いたアイコンがあり、青はトラック 1、黄はトラック 2、緑はトラック 3であることを示している。それぞれのアイコンには、 トラック 1、トラック 2、トラック 3と適切な代替テキストが提供されている。

事例 3: 必須項目のあるフォーム

フォームにいくつかの必須項目がある。必須項目のラベルは赤で示されている。 それに加えて、各ラベルの後ろに*(アスタリスク)がある。フォーム入力の説明文では、入力例に続いて、 「赤字で*(アスタリスク)の付いた項目は必須項目です。」と示されている。

注記: アスタリスクは、スクリーンリーダー(やその読上げモード)によっては読上げられないことがあり、 またデフォルトの文字サイズよりも小さいサイズで表示されるため、弱視の利用者にとっては見づらいかもしれない。コンテンツ制作者としては、 アスタリスクが用いられていることをテキストで示すとともに、表示されるアスタリスクの文字サイズを大きくすることが重要である。【訳注:日本語の場合は、アスタリスクよりも文字で「必須」と示したほうが、音声読み上げと見た目の両方でより確実である。】

事例 4: 緑色のサブミットボタンのあるフォーム

オンラインのローン申し込みにおいて、緑色のボタンでプロセスを進め、赤色のボタンでプロセスをキャンセルできると説明がある。 このとき、フォームは、緑色のボタンにはテキストで「Go」と書かれていて、「緑色の[Go]ボタンを押して結果を提出し、 次のステップに進んでください」と指示がある。

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

情報を伝えるのに色の違いが用いられている各項目に対して:

  1. 伝えられている情報が、テキストでも示されている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。