WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

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

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

解説

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

事例

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

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

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

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

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

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

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

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

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

参考リソース

この実装方法には、関連するリソースがない。

検証

チェックポイント

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

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

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。