画像を表示させるためにCSSが利用可能なウェブコンテンツ技術
これは、次の達成基準に関連する実装方法である：
この実装方法の目的は、単に装飾することだけが目的の画像と、マークアップを追加することなくウェブコンテンツに対して視覚的な整形を行うための画像を追加する方法を示すことである。 これによって、支援技術がテキストではないコンテンツを無視することが可能になる。 文字サイズの拡大やハイコントラストの設定を妨げているCSSの背景画像を消すことができるように、一部のユーザーエージェントでは、利用者の要求に応じてCSSを無視または無効にすることができる。
背景画像は、以下のCSSプロパティで表示させることができる：
background,
background-image,
content（:beforeまたは:after疑似要素と組み合わせて使用）
list-style-image.
注: この実装方法は、情報を伝えている画像、なんらかの機能を持っているような画像、主として知覚的なエクスペリエンスを作り出すことを目的としているような画像に対しては使用すべきではない。
以下のスタイルシートは、ページ全体の背景画像を指定している。
コード例：
…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…
以下のスタイルシートは、利用者がマウスポインタをリンクの上に置いたときの装飾的なロールオーバー効果を出すためにCSSのbackgroundプロパティを使用している。
コード例：
a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
text-decoration: none;
}
以下のスタイルシートでは、要素の角を丸くするために、CSSのbackgroundプロパティを使用している。
コード例：
…
<style type="text/css">
div#theComments { width:600px; }
div.aComment { background: url('images/middle.gif') repeat-y left top;
margin:0 0 30px 0; }
div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
margin:0; padding:8px 16px; }
div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
margin:0; padding-top:30px; }
</style>
</head>
<body>
<div id="theComments">
<div class="aComment">
<blockquote>
<p>やあ、ジョン。俺はこの実装方法がマジで気に入ったんで、自分のサイトでも使おうと思ってるんだ！</p>
</blockquote>
<div class="submitter">
<p class="cite"><a href="http://example.com/">名無しさん</a> from エルボニア</p>
</div>
</div>
<div class="aComment">
…
</div>
</div>
…以下の例では、見出し要素の内容であるテキストを置き換えるために装飾目的の画像が使われている。【訳注：画像置換は達成基準1.1.1の不適合事例であり、このような見出し要素で使用すべきではない。WCAGワーキンググループにこの事例の削除を提案中。】
コード例：
<style type="text/css">
h3#about {
width: 480px;
height: 34px;
position: relative;
}
h3#about span {
background: url(about.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>
...
<h3 id="about" title="About example.com"> <span></span>example.com について</h3>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 specificationには、body要素のbackground属性は非推奨であると記述されている。
装飾目的の画像がある。
それらがCSSで表示させられている。
1.に該当する場合に、2.を満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。