適用 (対象)
非テキストコンテンツのグループを用いて情報又は機能を提示する、全てのウェブコンテンツ技術
これは達成基準 1.1.1: 非テキストコンテンツ (十分な達成方法) に関する達成方法である。
解説
この達成方法の目的は、隣り合う非テキストコンテンツのグループを用いて情報又は機能を提示する際に生じる不要な重複を回避することである。
ウェブページでは、画像のグループを提示して情報を伝えることがある。一緒に提示する、又は特定の組み合わせで提示することにより、こうしたグループは様々なタイプの情報を伝えることができる。例えば、二つの星の画像のうち一つを白黒、もう一つをカラーで表示し、利用者評価を表すために使用することができる。また、塗りつぶした三つの星に続いて塗りつぶしていない二つの星を提示すれば、利用者評価が満点の五つ星のうちの三つ星であることを示すこともできる。
この達成方法を用いるには、コンテンツ制作者が、グループ全体と等価の目的を果たすテキストによる代替をそのグループにあるどれか一つのアイテムに関連付けて提供する。そして、グループ内のその他のアイテムは、支援技術が無視できるようにする。こうすることによって、利用者は、より効率的にそのグループの目的を理解して、グループ内の各アイテムにテキストによる代替が提供した際に生じる重複又は混乱を回避することができる。
事例
例 1: HTML での評価システム
次の例では、塗りつぶされた星三つと塗りつぶされていない星二つで評価が示されている。テキストによる代替は、五つの画像それぞれに提供することもできるが、このコンテンツ制作者は、一つ目の画像に「3 out of 5 stars」として画像のグループが伝えている評価を提供し、他の画像には空の代替テキストを用いている。
<p>Rating: <img src="star1" alt="3 out of 5 stars"> <img src="star1" alt=""> <img src="star1" alt=""> <img src="star2" alt=""> <img src="star2" alt=""> </p>
WAIC では G196-1 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド(AS)情報: G196-1 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
例 2: XHTML で画像のグループによって作成されたボタン
この例では、宣言している WCAG への適合レベルを示すために、各ボタンが複数の画像一式を用いている。このアプローチによって、支援技術は「画像 A、画像 A、画像 A」などのように読み上げるのを回避できるようになる。
<p>Conformance Level:</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>
WAIC では G196-2 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド(AS)情報: G196-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
検証
手順
- グループ内の一つのアイテムに、そのグループ全体の目的と等価なテキストによる代替があることを確認する。
- グループ内のその他のアイテムが、支援技術が無視できるようにマークされていることを確認する。
- 支援技術が無視できるようにマークされたアイテムが、グループ全体に対するテキストによる代替のあるアイテムと隣り合っていることを確認する。
期待される結果
- 上記全ての結果が真である。