CSSに対応しているウェブコンテンツ技術全て
これは、次の達成基準に関連する不適合事例である：
CSSのbackground-imageプロパティを使用すると、HTMLのコードとは無関係に、CSSでドキュメントに画像を組み込むことができる。 しかし、CSSのbackground-imageプロパティは装飾のために使用するものであるため、CSSで組み込まれる画像に代替テキストを付けることはできない。 代替テキストは、重要な情報を伝える画像を見ることのできない人にとって必須のものである。 したがって、このプロパティを重要な情報を伝える画像を追加するために使用した場合は不適合となる。
注記： 背景画像の中に情報を組み込むことは、読みやすくする目的で背景を変えている人や、OSのハイコントラスト・モードの利用者に対しても問題を引き起こす。これらの利用者は、代替テキストが存在しないことで背景画像に含まれている情報を失うことになる。
以下の例では、コンテンツの一部として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>ある書籍販売業者は、「新刊」「限定版」「在庫あり」「在庫なし」を示すためのアイコンとして背景画像を使用している。
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>なし
CSSによってコンテンツに追加されているすべての画像を検査対象とする。
画像は重要な情報を伝えていない。
画像が重要な情報を伝えている場合、その情報は支援技術にも伝えられ、かつCSSによる画像が表示されない場合でも伝えられるようになっている。
2と3の両方を満たさない場合は不適合となり、コンテンツは達成基準を満たさないことになる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。