テキストのブロックの前景及び背景を変更できる、一般に入手可能なユーザエージェントが備えるウェブコンテンツ技術を使用する

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

全てのウェブコンテンツ技術

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

解説

認知障害のある人は、ウェブページのコンテンツをうまく理解するために、前景のテキストと背景を特定の色の組み合わせを必要としていることがある。一般に利用されるブラウザの大部分は、ブラウザ内部の機能として、色設定を変更するオプションを提供している。この場合、ウェブコンテンツ制作者が指定した前景色及び背景色を、利用者が選択した色で上書きできる。

この達成基準を満たすために、ウェブコンテンツ制作者はこのようなコントロールを備えるブラウザで動作するようにウェブページをデザインし、このコントロールを上書きしないようにする。

ページ上の全てのテキストの前景色及び背景色を上書きすると、ページのグループ化及び組織化に関する視覚的な手がかりが隠れてしまい、理解及び利用がはるかに困難になる恐れがあることに注意する。この達成方法は、背景色が上書きされる場合にボーダーの色を変更しない技術及びユーザエージェントに適することがある。背景色を用いてページの領域の区切る場合、「C23: メインコンテンツのテキスト及び背景の色を指定せず、バナー、機能及びナビゲーションなどのような補助的なコンテンツのテキスト及び背景の色を CSS で指定する (CSS) 」を用いて、ウェブページの視覚的な構造を保ちつつ、利用者が主要なテキストの色をコントロールできるようにするとよい。

事例

訳注:

Firefox 及び Chrome では、例えば Stylus という拡張機能を追加することで、ユーザスタイルシートにより好みの前景色と背景色を指定できる。

検証

手順

  1. HTML コンテンツの色を利用者が変更できるブラウザで、ウェブページを開く。
  2. ブラウザ設定で、コンテンツに指定された色とは異なる前景色及び背景色に変更する。
  3. ページに戻ると、ブラウザで設定した別の前景色及び背景色が、コンテンツに指定された色を上書きしていることを確認する。

期待される結果

  • 3. の結果が真である。