Skip to content

テクニック F3:達成基準 1.1.1 の失敗例 － 重要な情報を伝える画像を付加するために、CSS を使用している

このテクニックについて

このテクニックは 1.1.1: 非テキストコンテンツ (失敗) に関連する。

この失敗例は、CSS をサポートする全ての技術に適用される。

解説

CSS の background-image プロパティは、HTML コード内での参照なしに、画像を CSS で文書に含める方法を提供する。CSS の background-image プロパティは装飾のために使用するものであるため、CSS で組み込まれる画像にテキストによる代替を付けることはできない。テキストによる代替は、重要な情報を伝える画像を見ることのできない人にとって必須のものである。したがって、このプロパティを重要な情報を伝える画像を追加するために使用した場合は失敗例となる。この失敗は、背景画像が HTML の style 属性で宣言された場合、及び背景画像宣言がクライアントスクリプトで動的に作成された場合 (下の失敗例 3: を参照) にも同様に適用される。

注記

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

事例

事例 1

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

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

これは次の抜粋コードで使用される:

<p id="bestinterest">Where else would you find a better interest rate?</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">Some book</li>
  <li class="instock">Some other book</li>
  <li class="limited">A book we desperately want to get rid of</li>
  ...
  <li class="outstock">A book you actually want </li>
</ul>

事例 3

事例 1 のコードで使用されている、同じ背景画像が HTML style 属性で宣言されている:

<p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;">
   Where else would you find a better interest rate?<p>

次のコードでは、背景画像の宣言がクライアントスクリプト内で作成されている:

<script>
   var newP = document.createElement('p');
   var newPText = document.createTextNode('Where else would you find a better interest rate?');
   newP.appendChild(newPText);
   newP.style.background = 'transparent url(/images/TopRate.png) no-repeat top left';
   document.body.appendChild(newP);
</script>

検証

手順

  1. CSS、HTML style 属性、又はスクリプトで動的に背景画像としてコンテンツに追加されている全ての画像を検査する。
  2. 画像が重要な情報を伝えていないことをチェックする。
  3. 画像が重要な情報を伝えている場合、その情報は支援技術にも伝えられ、かつ CSS による画像が表示されない場合でも伝えられるようになっている。

期待される結果

  • チェック 2 と #3 の両方が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。
Back to Top