a要素の中にimg要素がある場合のaltテキストの読上げ
- 2009/10/07 10:54 JST
a要素の中にimg要素がある場合、そのimg要素のalt属性の情報(代替テキスト)をPC-Talkerでは読上げてくれません。
「えっ！alt属性に記述された代替テキストの情報を読上げてくれないの？基本的にalt属性に記述された代替テキストは読上げてくれなくちゃ困るでしょ」と思われたかたが多いと思いますが、残念な事にa要素の中にimg要素がある場合のalt属性に記述された代替テキストはPC-Talkerでは読上げてくれないんです。
そこで、a要素の中にimg要素があり、そのimg要素のalt属性に記述された情報(代替テキスト)をどのように読上げるか、PC-Talker XP Version3.08とNVDA Version R3278jで検証してみました。
次のように別のサイトをリンクしている場合、新しい窓を開くようにa要素にtarget="_blank"を設定する場合があると思います。その場合は、外部サイトを新しい窓で開く事をユーザーに知らせる必要があります。
画像アイコンを使用し、その情報をimg要素のalt属性の値に記述して(外部サイトを新しい窓で開きます)という情報を知らせる例を用いてPC-Talker XP Version3.08とNVDA Version R3278jで読上げ方を検証してみました。
| 記述内容 | PC-Taklerで続けて読上げた場合 | PC-TalkerでTab移動して読上げた場合 | NVDAで続けて読上げた場合 | NVDAでTab移動して読上げた場合 |
|---|---|---|---|---|
| 1.a要素の中にimg要素があり、そのimg要素のalt属性の値に(外部サイトを新しい窓で開きます)と記述した場合 | Hiroron Labs(外部サイトを新しい窓で開きます) | Hiroron Labsリンク | きおくリンクHiroron Labs 画像(外部サイトを新しい窓で開きます) | Hiroron Labs (外部サイトを新しい窓で開きます)きおくリンク |
| 2.a要素の中にimg要素があり、そのimg要素のalt属性の値に(外部サイトを新しい窓で開きます)と記述し、a要素のtitle属性の値にも(外部サイトを新しい窓で開きます)と記述した場合 | 何も読上げない | (外部サイトを新しい窓で開きます)リンク | きおくリンクHiroron Labs 画像(外部サイトを新しい窓で開きます) | Hiroron Labs (外部サイトを新しい窓で開きます)きおくリンク |
| 3.a要素の中にimg要素があり、そのimg要素のalt属性の値に(外部サイトを新しい窓で開きます)と記述し、a要素のtitle属性の値にHiroron Labs(外部サイトを新しい窓で開きます)と記述した場合 | Hiroron Labs(外部サイトを新しい窓で開きます) | Hiroron Labs(外部サイトを新しい窓で開きます)リンク | きおくリンクHiroron Labs 画像(外部サイトを新しい窓で開きます) | Hiroron Labs (外部サイトを新しい窓で開きます)きおくリンク |
この結果からa要素のtitle属性の値にすべての情報(Hiroron Labs(外部サイトを新しい窓で開きます))を記述し、img要素のalt属性の値には、(外部サイトを新しい窓で開きます)の情報のみを記述する事がベストだという事がわかります。
スクリーンリーダーがどのように読上げるのか知った上でコーディングするのは非常に重要な事です。
WCAG2.0及びJIS X 8341-3に準拠するようにコーディングすると共に、スクリーンリーダー利用者のかたが実際にサイトにアクセスした際、十分な情報が伝わるようコーディングするように心がけるとよりアクセシブルなサイト構築が出来ると思います。