WCAG 2.0 実装方法集

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

-

F3: 達成基準 1.1.1 の不適合事例 - CSSを用いて、重要な情報を伝える画像を表示させている

適用(対象)

CSSに対応しているウェブコンテンツ技術全て

これは、次の達成基準に関連する不適合事例である:

解説

CSSのbackground-imageプロパティを使用すると、HTMLのコードとは無関係に、CSSでドキュメントに画像を組み込むことができる。 しかし、CSSのbackground-imageプロパティは装飾のために使用するものであるため、CSSで組み込まれる画像に代替テキストを付けることはできない。 代替テキストは、重要な情報を伝える画像を見ることのできない人にとって必須のものである。 したがって、このプロパティを重要な情報を伝える画像を追加するために使用した場合は不適合となる。

注記: 背景画像の中に情報を組み込むことは、読みやすくする目的で背景を変えている人や、OSのハイコントラスト・モードの利用者に対しても問題を引き起こす。これらの利用者は、代替テキストが存在しないことで背景画像に含まれている情報を失うことになる。

事例

不適合事例 1:

以下の例では、コンテンツの一部としてCSSによってのみ表示させられている画像が含まれている。その画像(TopRate.png)は180×200ピクセルで「基準金利 年 19.3%」というテキストを含んでいる。

コード例:



CSS内: 
p#bestinterest {
  padding-left: 200px;
  background: transparent url(/images/TopRate.png) no-repeat top left;
}

上記コードの適用先:

コード例:

 
<p id="bestinterest">
  これ以上の金利を発見できましたか?
</p>

不適合事例 2:

ある書籍販売業者は、「新刊」「限定版」「在庫あり」「在庫なし」を示すためのアイコンとして背景画像を使用している。

CSS内:

コード例:


ul#booklist li {
  padding-left: 20px;
}

ul#booklist li.new {
  background: transparent url(new.png) no-repeat top left; 
}
                            
ul#booklist li.limited {
  background: transparent url(limited.png) no-repeat top left; 
}
                            
ul#booklist li.instock {
  background: transparent url(instock.png) no-repeat top left; 
}

ul#booklist li.outstock {
  background: transparent url(outstock.png) no-repeat top left; 
}

上記コードの適用先:

コード例:


<ul id="booklist">
  <li class="new">ある書籍</li>
  <li class="instock">他の書籍</li>
  <li class="limited">オススメできない書籍</li>
  ...
  <li class="outstock">あなたの本当に欲しい書籍</li>
</ul>

参考リソース

なし

検証

チェックポイント

  1. CSSによってコンテンツに追加されているすべての画像を検査対象とする。

  2. 画像は重要な情報を伝えていない。

  3. 画像が重要な情報を伝えている場合、その情報は支援技術にも伝えられ、かつCSSによる画像が表示されない場合でも伝えられるようになっている。

判定基準

日本語訳における注記:

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