このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

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

-

C25: CSSで、テキスト及び背景の色は指定せずに、ウェブページの各領域の範囲を明確にするためのボーダーやレイアウトを指定する

適用(対象)

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

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

解説

この実装方法が意図するのは、ボーダー(境界)やレイアウトはCSSを用いて指定するが、文字色と背景色については利用者のブラウザやOSの設定に従って表示できるように指定しないでおく、ということである。 これによって利用者は、自分が見たい色でテキストを見ることができるようになり、同時に、テキストの段組、セクションの周りのボーダー、又はメニューとメインコンテンツの領域を区切る縦線といったレイアウトやページデザインの外観は保つことができるようになる。 また、ページにJavaScriptのポップアップ・ボックス又はドロップダウン・メニューが含まれている場合に色が上書きされるという、一部のブラウザで起こる表示の問題も回避することができる。

ボーダーやレイアウトを示す表示は、文字色と背景色に関する柔軟性と同様に、認知障害のある多くの人にとって役に立つ。 しかし、状況によってはこれら2つのニーズは相容れないこともある。それは、利用者がブラウザ上でコンテンツ制作者が選択した文字色と背景色を上書きする必要があるとき、ブラウザがボーダーやレイアウトまでも取り除いてしまうような場合である。 これは、ページがシングルカラムでひとつのブロックが他のブロックの下に表示されることを意味し、そうなると、不必要な余白ができ、テキストの1行の長さが長くなってしまう。 また、ポップアップ・ボックスの背景が透過して、ページ上のテキストの上にボックスのテキストが重なってしまったり、ドロップダウン・メニューが透過するかダークグレーの背景になってしまったりすることを意味する。 コンテンツ制作者が文字色と背景色を一切指定せず、その一方でボーダーの色やレイアウトを指定した場合、一般的なブラウザのほとんどでは、(コンテンツ制作者が指定した)CSSの他の宣言に影響を与えずにテキストと背景の色を変更することができる。

事例

事例 1

あるウェブページは、HTMLを使ってデザインされている。 ページを構成する各領域を囲うボーダーの色を指定し、メニューがメインコンテンツ領域の左側にフロートするレイアウトにするためにCSSが使用されている。 文字色も背景色も指定されていない。 利用者がブラウザで自分の色を設定すると、レイアウトを崩すことなしに、利用者に適した色とコントラストでページを閲覧できる。

参考リソース

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

検証

チェックポイント

  1. HTMLで作られたコンテンツの色を変更できるブラウザでウェブページを開く。

  2. ブラウザの設定画面で、テキスト、リンク及び背景の色を、現在の設定とは異なる色に変える。

    注:「ページで指定されている色を無視する」というようなオプションを選択していないことを確認する。

  3. ページに戻って表示を確認すると、新しく設定したテキスト、リンク及び背景の色で表示されている。

  4. どのボーダーも消えずに表示されており、レイアウトも崩れていない。

判定基準

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

日本語訳における注記:

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