WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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

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

解説

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

ウェブページでは、画像のグループを提示して情報を伝えることがある。一緒に提示する、又は特定の組み合わせで提示することにより、こうしたグループは様々なタイプの情報を伝えることができる。例えば、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. 支援技術が無視できるようにマークされたアイテムが、グループ全体に対する代替テキストのあるアイテムと隣り合っている。

判定基準

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