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