WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F24: 達成基準 1.4.3、1.4.6 及び 1.4.8 の失敗例 - 背景色を指定せずに前景色を指定する(又は、前景色を指定せずに背景色を指定する)

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

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

適用(対象)

ユーザエージェントが個人のスタイルシート又は他の方法を通して前景と背景の色を制御することを可能にする全てのウェブコンテンツ技術

これは、次の達成基準に関連する失敗例である:

解説

失明、認知障害、言語又は学習障害のある利用者は、多くの場合特定の前景色と背景色の組み合わせを好む。弱視の利用者は黒の背景に白い文字のウェブページの方がより見やすく、そしてそれぞれのユーザエージェントをこのコントラストに設定していることがある。多くのユーザエージェントでは、制作者が指定したすべてのスタイルを上書きせずに、好みの前景色または背景色に関する設定を利用者が選択できるようになっている。これにより、利用者は好ましい色の組み合わせの中でコンテンツ制作者によって色が指定されていないページを閲覧することが可能になる。

コンテンツ制作者が前景と背景の両方の色を指定しない限り、コンテンツ制作者は、コントラストの要求を満足したコントラストになっていることを保証できない。たとえば、コンテンツ制作者がテキストを灰色に指定していたら、それはユーザエージェントの設定より優先され、(ユーザエージェントによって利用者に設定された)明るい灰色の背景に(コンテンツ制作者に指定された)灰色のテキストというページが描画される。この原則は逆も成り立つ。もしコンテンツ制作者が背景を白にしていたら、コンテンツ制作者に指定された白い背景は、利用者のユーザエージェントの設定によって表現されている好みのテキストの色に似ているかもしれない。そのため、利用者にとって使用できないページに描写されてしまう。コンテンツ制作者は利用者がどのようにして好みの設定にしているかを予測できないため、コンテンツ制作者が前景色を指定していたら十分なコントラストを持つ背景色も指定すべきであり、逆もまた同様である。

前景色と背景色の両方を同じ CSS 規則上で定義する必要はない。CSS の色のプロパティは、先祖要素から引き継がれるので、前景色と背景色の両方が直接的に、又はその色が要素に対して適用される継承を通して定義されるのであればそれで十分である。

注記: 実践するにあたっては、テキストの全ての状態を含めることが重要である。例えば、テキスト、リンクテキスト、訪問済みリンクテキスト、マウスフォーカスがあたったとき及びキーボードフォーカスがあたったときのリンクテキストなど。

事例

失敗例 1: CSSで背景色のみ指定する

次の例では、背景色はCSSスタイルシートで定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていない。

コード例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>キャンバス背景の設定</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>背景は白です。</p>
  </body>
</html>

失敗例 2: CSSで前景色のみ指定する

次の例では、前景色はCSSスタイルシートで定義されているが背景色は定義されていない。よって、この事例は達成基準を満たしていない。

コード例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>キャンバス背景(←前景の間違い?)の設定</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>前景は白です。</p>
  </body>
</html>

失敗例 3: CSSでリンクテキストの色を指定する

次の例では、リンクテキスト(前景)の色をボディ要素で定義している。しかし背景色は定義していない。よって、この事例は達成基準を満たしていない。

コード例:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>人口動態の研究</TITLE>
 <style type="text/css">
  a:link { color: red }
  a:visited { color: maroon }
  a:active { color: fuchsia }
 </style>

</head>
<body>
  <p>... ドキュメント本文 ... <a href="foo.htm">Foo</a></p>
</body>
</html>

失敗例 4: HTML の bgcolor 属性で背景色のみ指定する

次の例では、背景色はbody要素で定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていないことになる。

HTML 4 の時点で bgcolor 属性の使用は廃止予定である、しかしこの失敗例は、この使用法がまだ一部のウェブサイトで見られるため含まれていることに注意する。

コード例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>人口動態に関する研究</title>
          </head>
          <body bgcolor="white">
              <p> ... ドキュメント本文 ...</p>
          </body>
  </html>

失敗例 5: HTML の text 属性を持つ前景色のみを指定する

次の例では、前景色は body 要素で定義されているが、背景色は定義されていない。したがって、この例は達成基準を満たしていない。

HTML 4の時点で text 属性の使用は廃止予定である、しかしこの失敗例は、この使用法がまだ一部のウェブサイトで見られるため含まれていることに注意する。

コード例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>人口動態に関する研究</title>

</head>
<body color="white">
  <p>... ドキュメント本文 ...</p>
</body>
</html>

参考リソース

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

検証

チェックポイント

  1. ウェブページのソースコードを見る。

  2. コンテンツ制作者が指定した前景色がある。

  3. コンテンツ制作者が指定した背景色がある。

注記 1: 色と背景色は外部のスタイルシート又は継承ルールによって、先行する一連のセレクターのあらゆるレベルで指定することができる。

注記 2: 背景色は CSS の「background-image」プロパティ又は「background」(画像の URL、例えば、'background: url("images/bg.gif")')プロパティで背景画像を用いて 指定されているかもしれない。背景画像があるとしても背景色を指定する必要がある。なぜならば利用者は ブラウザ上で画像を非表示にしているかもしれないからである。よって、背景画像と背景色をチェックする。

判定基準

2. を満たしているが 3. を満たしていない、又は、3. を満たしているが 2. を満たしていない場合、この不適合の条件が適用され、コンテンツは達成基準に不適合となる。