先のエントリですべての非テキストコンテンツに対して非テキストコンテンツと同じ目的及び情報を持つ代替テキストを提供することは、W3CのウェブアクセシビリテイのガイドラインWCAG2.0（JIS X8341-3:2010）において最低限の要件（達成等級A ⇒参考 適合レベル）となっているという話をしました。
1.1.1 非テキストコンテンツ （JIS X8341-3:2010では 7.1.1.1）
ユーザに提示されるすべての非テキストコンテンツには、同等の目的を果たす代替テキストがある。ただし、以下に挙げる場合は除く （レベル A）
from WCAG2.0 ガイドライン 1.1.1
しかし、この要件には例外がいくつか認められており、同じ1.1.1（JIS X8341-3:2010では 7.1.1.1）でその例外が列記されています((1)〜(6)は私の補記)。
- コントロール、入力： 非テキストコンテンツが、コントロールまたはユーザの入力を受け入れるものである場合、代替テキストは、その目的を説明する識別名を提供している。（コントロールおよびユーザの入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照のこと。）–(1)
- 時間の経過に伴って変化するメディア： 非テキストコンテンツが、時間の経過に伴って変化するメディアであるとき、代替テキストは、少なくとも、その非テキストコンテンツを識別できる説明を提供している。（メディアに関するその他の要件は、ガイドライン 1.2を参照のこと。）–(2)
- 試験： 非テキストコンテンツが、テキストで提示されると無効になる試験あるいは演習のとき、代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している。–(3)
- 感覚的： 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している。–(4)
- CAPTCHA： 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、代替テキストは、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力するCAPTCHAの代替形式を提供することで、様々な障害に対応している。–(5)
- 装飾、整形、非表示： 非テキストコンテンツが、装飾だけを目的にしている、あるいは見た目の整形のためだけに用いられている、またはユーザに提供されるものではないとき、支援技術が無視できるように実装されている。–(6)
from WCAG2.0 ガイドライン 1.1.1
今回はこの例外、つまり、非テキストコンテンツと同等の目的を果たす代替テキストを提供しなくてよい事例について紹介します。
目次
参考（本エントリ全体）
なお、以下、1.1.1 に記載されている順番に紹介していきますが、最初の(1)が抽象的でややわかりづらいかもしれませんので、最初は(1)を飛ばして、(2)以降から読み始めてもよいかもしれません。
(1)ユーザーのコントロール、入力を受け付けるインタラクティブなコンテンツ
コントロール、入力： 非テキストコンテンツが、コントロールまたはユーザの入力を受け入れるものである場合、代替テキストは、その目的を説明する識別名を提供している。（コントロールおよびユーザの入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照のこと。）
ユーザーのコントロールや入力を受け付ける非テキストコンテンツを指しており、フォームのラジオボタンやテキストフィールドなどがそれに該当するようです。イメージマップや複雑なアニメーションなどもこれに該当するようです。
コントロール、入力を受け付けるインタラクティブな非テキストコンテンツの場合、代替テキストではなく、識別名を提供することが求められています。
識別名とは「ソフトウェアがこれを用いて、ウェブコンテンツのコンポーネントを利用者に識別させることができるテキスト」という説明がWCAG 2.0解説書でされているのですが、よくわかりませんね・・・。
識別名の抽象的な文言による定義を読むより、以下のドキュメントを読んだ方がわかりやすいと思います。これが識別名であると表と事例で具体的に示しています。
参考
識別名について
識別名の実装方法は以下で解説されています。
実装方法
- H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける｜WCAG 2.0 実装方法集
- H65: label要素を用いることができないとき、title属性を用いてフォーム・コントロールを特定する｜WCAG 2.0 実装方法集
コントロールや入力を受け付ける非テキストコンテンツについては、その他の要件が「4.1.2 プログラムで解釈可能な識別名・役割及び設定可能な値」にありますので、こちらもあわせて参照してください。
ガイドライン 4.1
- 4.1.2 プログラムで解釈可能な識別名・役割及び設定可能な値（WCAG 2.0（W3C勧告）日本語訳）（JIS X8341-3:2010 7.4.1）
- 達成基準 4.1.2 を理解する | WCAG 2.0解説書
(2)動画・音声（時間の経過に伴って変化するメディア）
時間の経過に伴って変化するメディア： 非テキストコンテンツが、時間の経過に伴って変化するメディアであるとき、代替テキストは、少なくとも、その非テキストコンテンツを識別できる説明を提供している。（メディアに関するその他の要件は、ガイドライン 1.2を参照のこと。）
時間の経過に伴って変化するメディアとは、動画や音声などを指しています。
同等の目的を果たす代替テキストの提供が容易ではないため、その非テキストコンテンツがそのページ内にある目的をユーザーが理解できるようなテキストを代替テキストとして提供することが求めれます。
参考
なお、「時間の経過に伴って変化するメディア」の代替コンテンツの提供については、ガイドライン 1.2（JIS X8341-3:2010 7.1.2）に詳しく記述されていますので、こちらも参照するべきです。
- ガイドライン 1.2 ガイドライン 1.2 時間の経過に伴って変化するメディア： 時間の経過に伴って変化するメディアには代替コンテンツを提供する。（WCAG 2.0（W3C勧告）日本語訳）（JIS X8341-3:2010 7.1.2）
- ガイドライン 1.2 を理解する | WCAG 2.0解説書
(3)試験に用いられるコンテンツ
試験： 非テキストコンテンツが、テキストで提示されると無効になる試験あるいは演習のとき、代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している
ヒアリングテストなど試験のために用いられ、同等の目的を果たす代替テキストを提供すると非テキストコンテンツ本来の目的を果たせない非テキストコンテンツです。
もちろん試験の回答になるようなものは避けつつ、その非テキストコンテンツがそのページ内にある目的をユーザーが理解できるようなテキストを代替テキストとして提供し、ユーザーが非テキストコンテンツをどうしたいか判断できるようにすることが求めれます。
参考
(4)芸術作品など言葉では完全に表わせない表現物
感覚的： 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、代替テキストは、少なくともその非テキストコンテンツを識別できる説明を提供している。
交響曲や芸術作品などのテキストで非テキストコンテンツを完全に表現することができない非テキストコンテンツです。
その非テキストコンテンツのラベルと補足説明を代替テキストとして提供し、ユーザーがその非テキストコンテンツがそのページ内にある目的を理解し、どうしたいか判断できるようにすることが求めれます。
参考
(5)CAPTCHA
CAPTCHA： 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、代替テキストは、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力するCAPTCHAの代替形式を提供することで、様々な障害に対応している。
CAPTCHA（Wikpedia）とは、認証時に以下のような手書き風の画像テキストを用いて、機械ではなく人間が入力していることを確認する方式です。
画像と同等の目的を果たす代替テキストを提供するとCAPTCHAを用いる意味がありませんので、その非テキストコンテンツがそのページ内にある目的をユーザーが理解できるようなテキストを代替テキストとして提供し、また、音声読み上げなどの他の出力形式による代替コンテンツを提供することが求められます。
参考
- G143: 代替テキストを提供して、CAPTCHAの目的を説明する｜WCAG 2.0 実装方法集
- G144: 同じ目的を果たす、異なる感覚モダリティを用いたもう一つのCAPTCHAがウェブページにあることを確認する｜WCAG 2.0 実装方法集
(6)装飾目的の画像
装飾、整形、非表示： 非テキストコンテンツが、装飾だけを目的にしている、あるいは見た目の整形のためだけに用いられている、またはユーザに提供されるものではないとき、支援技術が無視できるように実装されている。
透過画像のように見栄えを調整するためだけに用いられる非テキストコンテンツを指しています。ユーザーに何ら情報を与える意図を持たないコンテンツであり、代替テキストを提供すると逆にユーザーに混乱を与えてしまいますので、スクリーンリーダーなどの支援技術が無視できるように実装されることが求められます。
支援技術が無視できるように実装ということですが、具体的には以下のようにalt属性を空（alt=””）にし、title属性を付与しないことが推奨されるようです。HTMLの仕様でalt属性は必須となっており、また、alt属性を省略すると画像ファイル名を読み上げるアプリケーションもあるので、alt属性そのものは省略してはなりません。
<img src="image.jpg" alt="">
参考
なお、ブラウザやスクリーンリーダーによって、挙動が異なるため、上の方法で提供してもファイル名を読み上げるものもあったりするようです。この提供方法が現時点ですべてのユーザーに対して優しいとは限らないことは知っておくべきです。
実際にアプリケーションがどう読み上げるかの参考
- アクセシビリティ・サポーテッド（AS）情報：H067 | ウェブアクセシビリティ基盤委員会
- Cocktailz 「alt night nippon 代替テキストで2時間」 2011年7月20日 – 隣り合わせの灰と青春
- 装飾およびレイアウト目的の画像の代替テキスト | アクセシビリティBlog | ミツエーリンクス
（おまけ）非テキストコンテンツを用いたリンク
上のどれかに該当する事例かもしれませんが、そうではないかもしれないので、おまけとして。これも代替テキストを提供しなくてもよい事例といえば事例です。
しばしば以下のようにテキストだけではなく、画像へもリンクを貼ることで、リンクの存在を目立たせる手法が用いられます。
例:Yahoo! Japanへの画像を用いたリンク
画像を用いた手法そのものは問題ではないのですが、リンクのはり方が以下のようになっているサイトをしばしば見かけます。
<a href="http://www.yahoo.co.jp/"><img src="logo.gif" alt="Yahoo! Japan" /></a> <a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>
代替テキストの「Yahoo! Japan」とリンクテキストの「Yahoo! Japan」が重複していますので、「Yahoo! Japan」が二度読み上げられてしまいます。
リンクテキストと代替テキストが同一の場合は、リンクテキストに代替テキストが果たす役割を委ねることができます。alt属性を空にし、一つのa属性で全体をラップして1つの大きなリンクにすることで、スクリーンリーダーのユーザーが利用する場合もリンクのテキストを一度読み上げるだけですむようになります。
<a href="http://www.yahoo.co.jp/"><img src="logo.gif" alt="" /> Yahoo! Japan </a>
参考
a要素でp要素をラップすることに違和感を感じる方もいらっしゃるかもしれませんが、HTML5からa要素はp要素やdiv要素のようなブロック要素に対しても用いることができるようになりました。
HTML5というと、対応していないブラウザが・・・、つまり、IE7とIE8への対応が問題となりそうですが、ブロック要素に対するリンクはIE7とIE8でも対応しているようであまり気にしなくてもよさそうです。