人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

●質問者: あらた
●カテゴリ:インターネット ウェブ制作
✍キーワード:うまい アイコン ツールチップ ファイル ブラウザ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● valufred
●20ポイント

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

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

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

◎質問者からの返答

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

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

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

ありがとうございます。


2 ● dede-suke
●20ポイント

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

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

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

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

◎質問者からの返答

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

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

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

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


3 ● valufred
●20ポイント

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

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

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

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

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


4 ● wildj
●30ポイント ベストアンサー

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

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

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

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

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ