14日目:リンクにタイトルを加える

Webなんてリンクでできてるようなもんなんだから、もっとみんなtitle 属性のこと知っててもいいようなもんだけど、あんまり使われてるのみないんだよなぁ。知らないそこのあなた、すべてのリンクは <a> タグに title 属性を足すことでタイトルをつけることができるんです。リンクのタイトルは、ビジュアルブラウザではだいたいツールチップってかたちで表示される。でもテキストブラウザとかでもちゃんと使えるよ。

全部のリンクにタイトルをつけたほうがいいってわけじゃない。リンクのテキストがリンク先の記事の名前になってるんなら、タイトルはつけないでいい。リンクテキストだけで充分わかるもん。だけど文脈をつかまないままリンクテキストだけを見たときに、それがどこへ行くリンクなのかわからないようならタイトルをつけよう。

誰がトクする?

  1. ジャッキー だね。JAWS にはリンクのタイトルをリンクテキストと一緒に読みあげるオプションがついてるんだ。(これは初期設定では無効になってる。有効にするために、ジャッキーは INSERT+V のショートカットで JAWS 表現レベルの調整ダイアログを開いて、「テキストリンクの表現レベル」を「Alt タグとタイトルの読み上げ」に変更してたよ。)
  2. マイケル も嬉しいだろうね。Opera を使ってるときにリンクのうえにカーソルを持ってくと、リンクのタイトルがステータスバーに、それにツールチップとしても表示されるから。このおかげでマイケルは貴重なネットワーク帯域を使ってリンク先に行くべきかっていう決断を下すことができるんだからね。
  3. リリアン にも役立つ。IEでカーソルをリンク上に持ってったとき、リンクタイトルがツールチップとして表示される。
  4. マーカス も喜ぶ。"l" を押すと、Lynx は今いるページ上のリンクのリストを表示するんだ。各リンクにタイトルがついてれば、このタイトルも一緒に表示される。

どうしたらいい?

リンクテキストだけじゃユーザがクリックしたいかどうか判断しにくそうな場合、そういうリンクには title 属性を足すといい。例:

  1. 僕のナビゲーションバーには、自分のサイトの統計ページへのリンクがある。このリンクはただ Statistics って書いてあるだけ。だけど title 属性にはもっと詳しい情報がつけてある。

    <a title="リファラーその他のサイト訪問者統計表" href="/stats/">Statistics</a>

  2. 僕のナビゲーションバーには、自分のサイトの統計ページへのリンクもある。Dive Into Python、こんな感じ:

    <a title="上級プログラマー向け無料 Python 本" href="http://diveintopython.org/">Dive Into Python</a>

  3. 何かの記事へ文章中の一文からリンクするときは、title 属性を使ってリンクの特徴を表すようにしてる。その記事のタイトルとか、引用とかね。例えば前回紹介した秘訣にはこういう文があった。

    なんでそれが問題なのかって?だって何かしらの理由から Javascript を使っていないひとがインターネットユーザの11% もいるんだ。

    これはこんなふうに見える。

    なんでそれが問題なのかって?だって何かしらの理由から Javascript を使っていないひとがインターネットユーザの11% もいるんだ。

title 属性でははっちゃけ過ぎないように。何事も加減を知ることが大切ですw

さらなる情報源(英語)