適用 (対象)
CSS を用いているウェブページ
これは達成基準 1.4.8: 視覚的提示 (十分な達成方法) に関する達成方法である。
解説
ウェブページの中には、色を用いてコンテンツをグループ分けをしているものもある。この達成方法の目的は、ウェブページの構成やグループ分けを示す視覚的な情報を残しつつも、メインコンテンツ部分においては特定の文字色と背景色の組み合わせを利用者が選択できるようにすることである。利用者がページ上のすべてのテキストの文字色と背景色を上書きした場合、ウェブページの構成とグループ分けに関する情報は失われる可能性があり、そうなるとそのページを利用することも理解することも難しくなる。
コンテンツ制作者がメインコンテンツ部分の文字色と背景色を指定しなければ、ユーザスタイルシートを使うことなしに、ブラウザでそれらの色を変更することが可能になる。主要コンテンツ以外に対して文字色と背景色を指定するということは、ブラウザはそれらの色を変更しないことを意味する。
この達成方法を使うということは、コンテンツ制作者はメインコンテンツの領域に対してデフォルトの文字色と背景色の組み合わせを使うことになる。結果として、配色は利用者の好みの色に設定したユーザエージェントによって全面的に決められる。つまり、利用者のニーズに最も合う色の選択となり、利用者にとって最も読みやすい配色となる。
事例
例 1
ある HTML のウェブページでは、ナビゲーションバー、メニューバー及び目次のような主要ではないコンテンツに対して、テキストと背景の色を指定するために CSS を使用している。しかし、メインコンテンツ部分に対しては、テキストにも背景にも色は指定していない。利用者は、自分に合った色とコントラストでメインコンテンツを閲覧するために、ブラウザで自分好みの色を設定する。ページの個々のセクションは、それでもなお視覚的にはっきり区別できる。
例 2
ある音楽雑誌のサイトには、白い背景に青い文字の記事がある。そのサイトのページの先頭近くでは、そのページに対して異なるスタイルシートを割り当てるリンクを提供している。新しいスタイルシートでは、テキストや背景に対しては色を指定していない。
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
-
ブラウザの設定でテキスト、リンク及び背景の色を変更し、デフォルトの色と異なる、補助的なコンテンツに指定されている色とも異なるようする。
注記ブラウザがそのページに指定されている色を無視するような設定にはしないこと。
- メインコンテンツが新しいテキスト、リンク及び背景の色を使用していることを確認する。
- 補助的なコンテンツのテキスト、リンク及び背景の色が変わらないことを確認する。
期待される結果
- #2 及び #3 の結果が真である。