WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

C9: 装飾目的の画像を付加するために、CSS を使用する

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

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

適用(対象)

画像を表示させるために CSS が利用可能なウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、単に装飾することだけが目的の画像と、マークアップを追加することなくウェブコンテンツに対して視覚的な整形を行うための画像を追加する方法を示すことである。 これによって、支援技術がテキストではないコンテンツを無視することが可能になる。 文字サイズの拡大やハイコントラストの設定を妨げているCSSの背景画像を消すことができるように、一部のユーザエージェントでは、利用者の要求に応じて CSS を無視または無効にすることができる。

背景画像は、以下の CSS プロパティで表示させることができる:

注: この達成方法は、情報を伝えている画像、なんらかの機能を持っているような画像、主として知覚的なエクスペリエンスを作り出すことを目的としているような画像に対しては使用すべきではない。

事例

事例 1: HTMLページの背景画像

以下のスタイルシートは、ページ全体の背景画像を指定している。

コード例:

…
<style type="text/css">
body { background: #ffe url('/images/home-bg.jpg') repeat; }
</style>
</head>
<body>
…

事例 2: CSSによるロールオーバーの背景画像

以下のスタイルシートは、利用者がマウスポインタをリンクの上に置いたときの装飾的なロールオーバー効果を出すためにCSSのbackgroundプロパティを使用している。

コード例:

a:hover { background: #ffe url('/images/hover.gif') repeat; color: #000;
   text-decoration: none;
}

事例 3: タブなどの要素の角を丸くするために使われるCSSによる背景画像

以下のスタイルシートでは、要素の角を丸くするために、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>
…

事例 4: 見出しの見た目を良くするために使用される画像置換

以下の例では、見出し要素の内容であるテキストを置き換えるために装飾目的の画像が使われている。【訳注:画像置換は達成基準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>

参考リソース

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

検証

チェックポイント

  1. 装飾目的の画像がある。

  2. それらが CSS で表示させられている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。