img要素などを使う際に、altは必須、もし何も説明文を掲載しなくても、「alt=""」で空白にする理由は分かります(ファイル名が読み上げられてしまうから)。
では、altとtitleってどういうふうに使い分ければいいのですか。(特に、imgとa要素において)議論の対象は、
①altとtitleは、どちらも音声ブラウザで読み上げられる?それなら、「普通に画像の説明をする」場合は、どちらを使うべき?「alt="", title="説明文"」?もしくは、「alt="説明"」のみ?
②別に飛ばしても構わない画像は、「alt=""」のみ(メニューのアイコンなど)?
③でも、ツールチップを表示したい、その上で音声ブラウザにも対応したい場合は、「alt="説明", title="説明"」?でも、この場合、音声ブラウザはどちらとも読み上げてしまう?(特にa要素で使う際に、よく悩んでしまいます)
このへんのうまい使い分けなどを知っている方いらっしゃいましたら、ぜひとも教えていただきたいのですが。
ご存知かも知れませんが、富士通がまとめた「ウェブ・アクセシビリティ指針」というのが、分かりやすいですよ。
54. すべての画像には、画像の内容を的確に示す alt属性をつける(画像の代替情報)。
http://jp.fujitsu.com/webaccessibility/v2/54.html
富士通ウェブ・アクセシビリティ指針
altに何も書かないと、ファイル名が読み上げられると言うのは、違うと思います。基本的には、altに何も書かないと、そこに画像があることも意識できません。よって、画像に何か意味があるのでしたら、必ずaltには、記述すべきだと思います。
では、altとtitleですが、こちらも、altを優先して書くべきです。altとtitleの両方に、同じ内容を書くと、2度発声し、ユーザーは、迷います。
よって、音声ブラウザを意識するなら、titleは不要(と言うか、じゃま)です。
alt属性については、そのようですね。ちょっと文書を読み間違えていました。
やはり、altとtitleはどちらとも読み上げられるようですね。それを確認したかった。
ただ、音声ブラウザのみを意識して作るわけにはいきませんので(titleのツールチップでリンク先を確認することもあるわけですから)、うまくtitleとaltの使い分けをしたいわけです。
ありがとうございます。
area要素と勘違いしているのかもしれませんが、a要素にalt属性はなかったと思います。
①alt属性はほぼ全ての音声ブラウザで読み上げられますが、古い音声ブラウザはtitle属性を読み上げないものもあります。ですが、alt属性は画像が表示されないときの代替文書で、title属性は要素を補足説明するものです。なので、画像の説明をする場合は、alt属性に画像の代替文書を、title属性に画像の説明をすることをお勧めします。
②飛ばしても構わなければ、alt=""でいいと思います。
③a要素にはtitle属性しか付けられないので、 title="説明"で十分です(alt属性は多分無視されます)。
なるほど。まず、altを優先。でもって、その記述を詳しくいきたければ、titleでもっと詳しく書いておくと。このやり方は参考になります。
その上で、a要素は僕の間違いです。
本当に言いたかったのは、a要素で記述している、文字とtitleの整合性をどのように位置付けるかです。
例えば、単にa要素を何かしらの文字に指定しておいて、その上でtitleも設定すると(例えば、サイドメニューなんかで)、どういった動作になるのか、このへんのうまい使い分けはないのか。そういったことをお伺いしたいのです。
アンカータグについて、書きませんでしたね、失礼しました。
この場合にも、titleはじゃまです。アンカー文字に、適切な言葉、例えば「こちらから」「ここから」などは、不明。
しっかりした文字列で、示せていれば、titleは不要です。
結論。titleは、音声ブラウザにとっては、じゃまです。
最後に、音声ブラウザといっても、多種多様なソフトが発売されています。まだまだ発展途上の段階なので、これで決まりってことはありませんし、各社のブラウザによって、動作に違いがあるので、必ず上記の方法が正しいとは言えません。
ご存知かも知れませんが、富士通がまとめた「ウェブ・アクセシビリティ指針」というのが、分かりやすいですよ。
54. すべての画像には、画像の内容を的確に示す alt属性をつける(画像の代替情報)。
http://jp.fujitsu.com/webaccessibility/v2/54.html
富士通ウェブ・アクセシビリティ指針
うお、情けない、僕これ見落としていました。ツールのColorSelectorなんかはダウンロードして、ちょくちょく使っているにも関わらず。
そうです。こういう実務レベルで使える指針がほしかったのです。ありがとうございます。
うお、情けない、僕これ見落としていました。ツールのColorSelectorなんかはダウンロードして、ちょくちょく使っているにも関わらず。
そうです。こういう実務レベルで使える指針がほしかったのです。ありがとうございます。