適用 (対象)
全てのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
- 達成基準 1.4.3: コントラスト (最低限) (参考)
- 達成基準 1.4.6: コントラスト (高度) (参考)
- 達成基準 1.4.8: 視覚的提示 (十分な達成方法)
解説
認知障害のある人は、ウェブページのコンテンツをうまく理解するために、前景のテキストと背景を特定の色の組み合わせを必要としていることがある。一般に利用されるブラウザの大部分は、ブラウザ内部の機能として、色設定を変更するオプションを提供している。この場合、ウェブコンテンツ制作者が指定した前景色及び背景色を、利用者が選択した色で上書きできる。
この達成基準を満たすために、ウェブコンテンツ制作者はこのようなコントロールを備えるブラウザで動作するようにウェブページをデザインし、このコントロールを上書きしないようにする。
ページ上の全てのテキストの前景色及び背景色を上書きすると、ページのグループ化及び組織化に関する視覚的な手がかりが隠れてしまい、理解及び利用がはるかに困難になる恐れがあることに注意する。この達成方法は、背景色が上書きされる場合にボーダーの色を変更しない技術及びユーザエージェントに適することがある。背景色を用いてページの領域を区切る場合、「C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、機能及びナビゲーションなどのような補助的なコンテンツのテキスト及び背景の色を CSS で指定する (CSS) 」を用いて、ウェブページの視覚的な構造を保ちつつ、利用者が主要なテキストの色をコントロールできるようにするとよい。
事例
- 前景色及び背景色の指定のために、HTML と CSS を用いてデザインしているウェブページがある。利用者は Internet Explorer 7 で自分の望む色に設定し、選択した前景色及び背景色でコンテンツを見ることができる。
- HTML と CSS を用いてデザインしているウェブページがある。さまざまなブラウザでどのように色を設定するかを説明したページへのリンクを設置している。
訳注:
Firefox 及び Chrome では、例えば Stylus という拡張機能を追加することで、ユーザスタイルシートにより好みの前景色と背景色を指定できる。
検証
手順
- HTML コンテンツの色を利用者が変更できるブラウザで、ウェブページを開く。
- ブラウザ設定で、コンテンツに指定された色とは異なる前景色及び背景色に変更する。
- ページに戻ると、ブラウザで設定した別の前景色及び背景色が、コンテンツに指定された色を上書きしていることを確認する。
期待される結果
- 3. の結果が真である。