適用 (対象)
CSS を用いているウェブページ
これは達成基準 1.4.8: 視覚的提示 (十分な達成方法) に関する達成方法である。
解説
この達成方法が意図するのは、ボーダー (境界) やレイアウトは CSS を用いて指定するが、文字色と背景色については利用者のブラウザや OS の設定に従って表示できるように指定しないでおく、ということである。これによって利用者は、自分が見たい色でテキストを見ることができるようになり、同時に、テキストの段組、セクションの周りのボーダー、又はメニューとメインコンテンツの領域を区切る縦線といったレイアウトやページデザインの外観は保つことができるようになる。また、ページに JavaScript のポップアップボックス又はドロップダウンメニューが含まれている場合に色が上書きされるという、一部のブラウザで起こる表示の問題も回避することができる。
ボーダーやレイアウトを示す表示は、文字色と背景色に関する柔軟性と同様に、認知障害のある多くの人にとって役に立つ。しかし、状況によってはこれら二つのニーズは相容れないこともある。それは、利用者がブラウザ上でコンテンツ制作者が選択した文字色と背景色を上書きする必要があるとき、ブラウザがボーダーやレイアウトまでも取り除いてしまうような場合である。これは、ページがシングルカラムでひとつのブロックが他のブロックの下に表示されることを意味し、そうなると、不必要な余白ができ、テキストの 1 行の長さが長くなってしまう。また、ポップアップボックスの背景が透過して、ページ上のテキストの上にボックスのテキストが重なってしまったり、ドロップダウンメニューが透過するかダークグレーの背景になってしまったりすることを意味する。コンテンツ制作者が文字色と背景色を一切指定せず、その一方でボーダーの色やレイアウトを指定した場合、一般的なブラウザのほとんどでは、(コンテンツ制作者が指定した) CSS の他の宣言に影響を与えずにテキストと背景の色を変更することができる。
事例
例 1
あるウェブページは、HTML を使ってデザインされている。ページを構成する各領域を囲うボーダーの色を指定し、メニューがメインコンテンツ領域の左側にフロートするレイアウトにするために CSS が使用されている。文字色も背景色も指定されていない。利用者がブラウザで自分の色を設定すると、レイアウトを崩すことなしに、利用者に適した色とコントラストでページを閲覧できる。
検証
手順
- HTML コンテンツの色を変更できるブラウザでウェブページを開く。
-
ブラウザの設定で、テキスト、リンク及び背景の色を変更し、ブラウザで現在の設定とは異なる色に変える。
注記「ページで指定されている色を無視する」というようなオプションを選択していないことを確認する。
- ページに戻り、ページが新しいテキスト、リンク及び背景の色で表示されていることを確認する。
- どのボーダーも消えずに表示されており、レイアウトも崩れていないことを確認する。
期待される結果
- #3 及び #4 の結果が真である。