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>
…

参考リソース

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

検証

手順

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

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

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。