a要素の中にimg要素がある場合のaltテキストの読上げ
- 2009年10月 7日(水) 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に準拠するようにコーディングすると共に、スクリーンリーダー利用者のかたが実際にサイトにアクセスした際、十分な情報が伝わるようコーディングするように心がけるとよりアクセシブルなサイト構築が出来ると思います。
トラックバック
- このエントリのトラックバックURL:
- http://white-stage.com/trackback.php/alt_text
'a要素の中にimg要素がある場合のaltテキストの読上げ'について他のサイトでは次のように言及されています:
- http://topsy.com/tb/bit.ly/18MYKP
- トラックバック オン 2009年10月 7日(水) 21:19 JST
[...] Links Linking to the white-stage.com page http://bit.ly/18MYKP info 3 tweets Tweet a要素の中にimg要素がある場合のaltテキストの読上げ - White Stagewhite-stage.com/article.php/alt_text – view page – cached a要素の中にimg要素がある場合のaltテキストの読上げについて [...] 続きを読む
- a要素の中にimg要素がある場合のaltテキストの読上げ – White Stage | My Web Development Bookmarks
- トラックバック オン 2009年10月 9日(金) 18:52 JST
[...] ”残念な事にa要素の中にimg要素がある場合のalt属性に記述された代替テキストはPC-Talkerでは読上げてくれないんです。” See the article here:a要素の中にimg要素がある場合のaltテキストの読上げ – White StageNo related posts. « Cartonage Float XHTML » Ads Browse By Tags [...] 続きを読む
サイト管理者はコメントに関する責任を負いません。