音声ブラウザの動作における、title、alt属性についてお伺いしたいことがあります。


img要素などを使う際に、altは必須、もし何も説明文を掲載しなくても、「alt=""」で空白にする理由は分かります(ファイル名が読み上げられてしまうから)。

では、altとtitleってどういうふうに使い分ければいいのですか。(特に、imgとa要素において)議論の対象は、

①altとtitleは、どちらも音声ブラウザで読み上げられる?それなら、「普通に画像の説明をする」場合は、どちらを使うべき?「alt="", title="説明文"」?もしくは、「alt="説明"」のみ?

②別に飛ばしても構わない画像は、「alt=""」のみ(メニューのアイコンなど)?

③でも、ツールチップを表示したい、その上で音声ブラウザにも対応したい場合は、「alt="説明", title="説明"」?でも、この場合、音声ブラウザはどちらとも読み上げてしまう?(特にa要素で使う際に、よく悩んでしまいます)

このへんのうまい使い分けなどを知っている方いらっしゃいましたら、ぜひとも教えていただきたいのですが。

回答の条件
  • 1人2回まで
  • 登録:2006/07/24 12:03:16
  • 終了:2006/07/26 21:37:02

ベストアンサー

id:wildj No.4

wildj回答回数8ベストアンサー獲得回数32006/07/26 19:04:21

ポイント30pt

ご存知かも知れませんが、富士通がまとめた「ウェブ・アクセシビリティ指針」というのが、分かりやすいですよ。

54. すべての画像には、画像の内容を的確に示す alt属性をつける(画像の代替情報)。

http://jp.fujitsu.com/webaccessibility/v2/54.html

富士通ウェブ・アクセシビリティ指針

http://jp.fujitsu.com/webaccessibility/v2/

id:aratako0

うお、情けない、僕これ見落としていました。ツールのColorSelectorなんかはダウンロードして、ちょくちょく使っているにも関わらず。

そうです。こういう実務レベルで使える指針がほしかったのです。ありがとうございます。

2006/07/26 21:36:15

その他の回答(3件)

id:valufred No.1

valufred回答回数19ベストアンサー獲得回数02006/07/24 12:25:01

ポイント20pt

altに何も書かないと、ファイル名が読み上げられると言うのは、違うと思います。基本的には、altに何も書かないと、そこに画像があることも意識できません。よって、画像に何か意味があるのでしたら、必ずaltには、記述すべきだと思います。

では、altとtitleですが、こちらも、altを優先して書くべきです。altとtitleの両方に、同じ内容を書くと、2度発声し、ユーザーは、迷います。

よって、音声ブラウザを意識するなら、titleは不要(と言うか、じゃま)です。

id:aratako0

alt属性については、そのようですね。ちょっと文書を読み間違えていました。

やはり、altとtitleはどちらとも読み上げられるようですね。それを確認したかった。

ただ、音声ブラウザのみを意識して作るわけにはいきませんので(titleのツールチップでリンク先を確認することもあるわけですから)、うまくtitleとaltの使い分けをしたいわけです。

ありがとうございます。

2006/07/24 12:50:57
id:dede-suke No.2

dede-suke回答回数11ベストアンサー獲得回数12006/07/24 12:28:14

ポイント20pt

area要素と勘違いしているのかもしれませんが、a要素にalt属性はなかったと思います。

①alt属性はほぼ全ての音声ブラウザで読み上げられますが、古い音声ブラウザはtitle属性を読み上げないものもあります。ですが、alt属性は画像が表示されないときの代替文書で、title属性は要素を補足説明するものです。なので、画像の説明をする場合は、alt属性に画像の代替文書を、title属性に画像の説明をすることをお勧めします。

②飛ばしても構わなければ、alt=""でいいと思います。

③a要素にはtitle属性しか付けられないので、 title="説明"で十分です(alt属性は多分無視されます)。

id:aratako0

なるほど。まず、altを優先。でもって、その記述を詳しくいきたければ、titleでもっと詳しく書いておくと。このやり方は参考になります。

その上で、a要素は僕の間違いです。

本当に言いたかったのは、a要素で記述している、文字とtitleの整合性をどのように位置付けるかです。

例えば、単にa要素を何かしらの文字に指定しておいて、その上でtitleも設定すると(例えば、サイドメニューなんかで)、どういった動作になるのか、このへんのうまい使い分けはないのか。そういったことをお伺いしたいのです。

2006/07/24 12:54:55
id:valufred No.3

valufred回答回数19ベストアンサー獲得回数02006/07/24 12:32:07

ポイント20pt

アンカータグについて、書きませんでしたね、失礼しました。

この場合にも、titleはじゃまです。アンカー文字に、適切な言葉、例えば「こちらから」「ここから」などは、不明。

しっかりした文字列で、示せていれば、titleは不要です。

結論。titleは、音声ブラウザにとっては、じゃまです。

最後に、音声ブラウザといっても、多種多様なソフトが発売されています。まだまだ発展途上の段階なので、これで決まりってことはありませんし、各社のブラウザによって、動作に違いがあるので、必ず上記の方法が正しいとは言えません。

id:wildj No.4

wildj回答回数8ベストアンサー獲得回数32006/07/26 19:04:21ここでベストアンサー

ポイント30pt

ご存知かも知れませんが、富士通がまとめた「ウェブ・アクセシビリティ指針」というのが、分かりやすいですよ。

54. すべての画像には、画像の内容を的確に示す alt属性をつける(画像の代替情報)。

http://jp.fujitsu.com/webaccessibility/v2/54.html

富士通ウェブ・アクセシビリティ指針

http://jp.fujitsu.com/webaccessibility/v2/

id:aratako0

うお、情けない、僕これ見落としていました。ツールのColorSelectorなんかはダウンロードして、ちょくちょく使っているにも関わらず。

そうです。こういう実務レベルで使える指針がほしかったのです。ありがとうございます。

2006/07/26 21:36:15

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

  • いつの間にか周りで議論が巻き起こり、気が付いたら当事者の意見は反映されていない。それは、バリアフリーでも、Web標準でも、アクセシビリティの議論も一緒なのかもしれない。 Web標
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません