WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

G196: 画像のグループにある一つの画像に代替テキストを提供して、そのグループの全ての画像を説明する

適用(対象)

非テキストコンテンツのグループを用いて情報又は機能を提示する、全てのウェブコンテンツ技術

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

解説

この実装方法の目的は、隣り合う非テキストコンテンツのグループを用いて情報又は機能を提示する際に生じる不要な重複を回避することである。

ウェブページでは、画像のグループを提示して情報を伝えることがある。一緒に提示する、又は特定の組み合わせで提示することにより、こうしたグループは様々なタイプの情報を伝えることができる。例えば、2つの星の画像のうち1つを白黒、もう1つをカラーで表示し、利用者評価を表すために使用することができる。また、塗りつぶした3つの星に続いて塗りつぶしていない2つの星を提示すれば、利用者評価が満点の5つ星のうちの3つ星であることを示すこともできる。

この実装方法を用いるには、コンテンツ制作者が、グループ全体と等価の目的を果たす代替テキストをそのグループにあるどれか一つのアイテムに関連付けて提供する。そして、グループ内のその他のアイテムは、支援技術が無視できるようにする。こうすることによって、利用者は、より効率的にそのグループの目的を理解して、グループ内の各アイテムに代替テキストが提供した際に生じる重複又は混乱を回避することができる。

事例

事例 1: HTMLでの評価システム

次の例では、塗りつぶされた星3つと塗りつぶされていない星2つで評価が示されている。代替テキストは、5つの画像それぞれに提供することもできるが、このコンテンツ制作者は、1つ目の画像に「5つ星のうちの3つ星」として画像のグループが伝えている評価を提供し、他の画像には空の代替テキストを用いている。

コード例:


  <p>評価:
   <img src="star1" alt="5つ星のうちの3つ星">
   <img src="star1" alt="">
   <img src="star1" alt="">
   <img src="star2" alt="">
   <img src="star2" alt="">
  </p>
		

事例 2: XHTMLで画像のグループによって作成されたボタン

この例では、宣言しているWCAGへの適合レベルを示すために、各ボタンが複数の画像一式を用いている。このアプローチによって、支援技術は「画像A、画像A、画像A」などのように読み上げるのを回避できるようになる。

コード例:


<p>適合レベル:</p>
 <button name="A"><img src="a.png" alt="レベル A" /></button> <br />
 <button name="AA"><img src="a.png" alt="レベル AA" /><img src="a.png" alt="" /></button> <br />
 <button name="AAA"><img src="a.png" alt="レベル AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>
		

検証

チェックポイント

  1. グループ内の一つのアイテムに、そのグループ全体の目的と等価な代替テキストがある。

  2. グループ内のその他のアイテムは、支援技術が無視できるようにマークされている。

  3. 支援技術が無視できるようにマークされたアイテムが、グループ全体に対する代替テキストのあるアイテムと隣り合っている。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。