WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、特集記事及びナビゲーションなどのようにメインではないコンテンツのテキスト及び背景の色を CSS で指定する

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

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

適用(対象)

CSSを用いているウェブページ

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

ユーザエージェント及び支援技術によるサポート

C23 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

ウェブページの中には、色を用いてコンテンツをグループ分けをしているものもある。この達成方法の目的は、ウェブページの構成やグループ分けを示す視覚的な情報を残しつつも、メインコンテンツ部分においては特定の文字色と背景色の組み合わせを利用者が選択できるようにすることである。利用者がページ上のすべてのテキストの文字色と背景色を上書きした場合、ウェブページの構成とグループ分けに関する情報は失われる可能性があり、そうなるとそのページを利用することも理解することも難しくなる。

コンテンツ制作者がメインコンテンツ部分の文字色と背景色を指定しなければ、ユーザスタイルシートを使うことなしに、ブラウザでそれらの色を変更することが可能になる。主要コンテンツ以外に対して文字色と背景色を指定するということは、ブラウザはそれらの色を変更しないことを意味する。

この達成方法を使うということは、コンテンツ制作者はメインコンテンツの領域に対してデフォルトの文字色と背景色の組み合わせを使うことになる。結果として、配色は利用者の好みの色に設定したユーザエージェントによって全面的に決められる。つまり、利用者のニーズに最も合う色の選択となり、利用者にとって最も読みやすい配色となる。

事例

事例 1

ある HTML のウェブページでは、ナビゲーションバー、メニューバー及び目次のような主要ではないコンテンツに対して、テキストと背景の色を指定するために CSS を使用している。しかし、メイン・コンテンツ部分に対しては、テキストにも背景にも色は指定していない。利用者は、自分に合った色とコントラストでメイン・コンテンツを閲覧するために、ブラウザで自分好みの色を設定する。ページの個々のセクションは、それでもなお視覚的にはっきり区別できる。

事例 2

ある音楽雑誌のサイトには、白い背景に青い文字の記事がある。そのサイトのページの先頭近くでは、そのページに対して異なるスタイルシートを適用するリンクを提供している。新しいスタイルシートでは、テキストや背景に対しては色を指定していない。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. テキスト、リンク及び背景の色が、デフォルトの色とも、メインではないコンテンツに指定されている色とも異なるように、ブラウザの設定を変える。

    注記: ブラウザがそのページに指定されている色を無視するような設定にはしないこと。

  2. メインコンテンツのテキスト、リンク及び背景が、設定した色に変わる。

  3. メインではないコンテンツのテキスト、リンク及び背景の色は変わらない。

判定基準

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