みなさん、最近title属性書いてますか？私は書いています。ははは。

先日、アクセシビリティーの事を考えながらアクセシビリティー以外のことも話すお茶会悪徳（AccTalk）に参加してきたのですが、そのときちょっとtitle属性のことが話に上がったのでブログにも書いてみようと思いました。ちなみにこのときはほかにもそばの話、技術的特異点の話、構造化データの話とか色々しました。

#AccTalk #10 – Togetterまとめ

AccTalkについての説明がこれであってるのかはわからないですが、気になるひとはページを覗いてみてください★ もちろん参加も歓迎だと思いますよ！アクセシビリティーについていろんなことを質問するチャンスでもありますから。

title属性とは

title属性は、HTML5の仕様にもあるグローバル属性のひとつであり、要素に主にツールチップで提供されるような、助言的な情報を付加するための属性です。title属性は要素によっては特別な意味を持ちます。例えばabbr要素であればその略語の完全な表記、dfn要素であれば要素の内容よりも優先する定義語を決める、というようなものです。

詳しい意味については仕様を参照してください。

3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳

[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて – WEBCRE8.jp

実際何のために書いてる？

コンテンツに埋め込まれた助言的な情報をどのように表現するべきか

自身の経験としても、title属性を何のために書いたかと言われればほぼツールチップを表示するために書いています。でもこれって実際に必要なんですかね…？

特に正解は今やスマホの時代です。スマートフォンユーザーがアクセスできないツールチップ内の情報は他のマウスオーバーエフェクトとともに活用されるタイミングが減っています。それどころか、なまじその機能があるせいで制作者がそれに頼ってしまい、特定環境でユーザーに伝えるべき情報を伝え忘れることさえあるようです。

あるいはSEOに有利、というようなことがまことしやかに言われていたり、alt属性にもtitle属性にも同じ文章を書いていたり。特にWordPressだと画像挿入機能にtitle属性要素を入れる項目があるので、そこにalt属性と同じ文章をはっつけてる人もいると思います（私も一応思うところがあって入れています）。ただ一般的にはあまり意味がないですよね。

title属性はオワコン？

じゃあ何のためにあるの？という感じですが、今となってはツールチップでしか提供されない情報をコンテンツに持たせるのはあまり好ましくないと言えます。冒頭で触れたAccTalkでこの話をしたときも木達さん（@kazuhito）はtitle属性は書いてない、とおっしゃっていました。

ここでいったんtitle属性の特徴と、あまり使うべきでない理由を整理します。

• title属性はコンテンツに付属する助言的な情報を表すためのものである
• PCブラウザーにおいてtitle属性の情報はツールチップで提供される
• 利用者が増加しているスマートフォンのようなデバイスではツールチップの情報を受け取れない
• 情報を限定的な方法で提供するより他の方法を選ぶべき

上記に加えて、個人的にはtitle属性で扱われる内容には意味的な一貫性がないこともイマイチ有用に使えない理由かなと思っています。class 属性なんかと同じで、ブラウザーなどの支援技術が受け取る情報として考えるにはあまりセマンティックでないんですよね…。仕様に書いているツールチップに適する情報というのはまあ便宜上そう言っているだけだと思いますけど、人によって、用途によって内容の示すものが違うのではかえって利用者を混乱させることにもなりそうです。実際制作者だって混乱してますしねw

title属性に明日はあるか

では次に、コンテンツに付属する助言的な情報というものは本当に今もツールチップという手段でしか提供し得ないのかということについて考えてみます。

他の表現で提供する

title属性は主に記述した内容をツールチップで表示させる用途に使われていたわけですが、それ以外の方法で助言的な情報を提供してもいいはずです。例えばPCではツールチップで表示し、スマートフォンなどではdisplayプロパティーを用いてルビのように表示したり、かっこ書きで表示したりといった方法です。これならば、マウスオーバーできない利用者も情報を受け取れます。

ただしこういった表現は大抵、同等の内容を他の要素を使って記述できてしまいます。ルビはruby要素、かっこ書きはsmall要素または最初から生テキストとして説明してしまうといった感じです。だいたい、書いてしまうのなら別にPCでの表示をツールチップにする必要がないですねw スマートフォンでテキストを表示し、PCでコンパクトにするっていうのもなんか矛盾してますし…。

画像などの挿入コンテンツにはキャプションという表現手段があるので、figure要素でマークアップしてキャプションによって提供するのが順当じゃないかなと思います。

つまり、この場合はそもそも助言的な情報をtitle属性に記述することがなくなってしまいます。

ツールチップの利用方法を変える

次にツールチップをマウスオーバー以外の方法で利用できるようにする場合です。考えられるのはツールチップをあらかじめ表示しておく、タップで表示するようにしておく、などですね。

例えばtipsoはこのような表現を実装できるjQueryプラグインです。

dfn要素、abbr要素のデフォルトスタイルシートはborder-bottom: 1px dotted;ですが、こうした表現によって略語や定義語が提供されるということを利用者が知っている場合にはなかなか有用だと思います。

ただし、このような手段をリンクに用いるのはあまりお勧めできません。リンクのタイトルとしてツールチップを表示させるような挙動は、ユーザーの持っているリンクをタップすると直ちにページ遷移、あるいはページ内の別コンテンツに移動するという予想を裏切ることになり、さらにもう一度タップさせるという手間も含んでしまいます。アクセシビリティー的にも、このようなことをするより最初からリンクテキストにしっかり情報を記述しておくほうがよさそうです。

また、この方法にはそもそも利用者にツールチップがあるよということを伝える方法が乏しく（下線の点線ってマイナーですよね）、結局アクセスできないも同然だという問題もあります。画像のツールチップとかぱっと見いい感じなんですけど、画像をタップする人は普通、画像が表している別のページかメディアファイル自体を表示しようと思ってタップしますよね。

しかたなく書く

コーディングのレギュレーションが決まっている、またはデザインや目に見えるテキストの記述は確定していて、それ以外の方法でなんとか情報を提供したい場合。その場合はしかたないですが書きましょう。

このときはもっといい方法があるのに、と思いながら実装することになるのですが…そう思うのであればやはり、今後自分がその状態を変える権限を持ってプロジェクトに関われるようになり、マークアップを理解してレギュレーション自体を作ったり、デザインに関われるようにしようということを考えたいです。

Webサイトの発信者の伝えたい意図が利用者あるいは機械に正しく伝わるかどうかは制作者の実装に委ねられています。そのとき制作者が仕様の解釈を間違っていては、その意図というものも砂の上に立てる城のようにあやふやなものになってしまいます。発信者が理解できている（もしくはあなた自身がコンテンツを作っている）なら問題ないですけどね。

そうでないならコンテンツが利用者に届いてしまうその水際で、私たちが頑張りましょう！★

[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者 – WEBCRE8.jp

まとめ

結論として、title属性というものは基本的には以前使われていたマークアップが残っているだけのものに過ぎず、以前のツールチップと同等の利便性を持つ提供方法が生まれない限り記述する意味のないものだと言えるでしょう。仕様にある助言的な情報というものもおそらくはツールチップありきの定義であって、ルビやキャプション、本文での解説で同等の情報をもたらすことができるのであれば無理に使う必要はないと考えられます。

特にモバイルデバイス前提であれば、補足的な情報を利用者のアクションの必要なエリアに押し込めておくということ自体があまり便利でないものです。タップできる要素の表現方法をいたずらに増やすよりは、スクロールしてもらったほうがいいというわけです。

とはいえ個人的には、私はtitle属性に記述する内容を、積極的に情報にアクセスしたいのであれば受け取れるが、基本的には見せなくていい程度のものだと考えています。

なくしてしまうわけにはいかないけど別に普段は必要ない情報はどのように提供されるべきだろうか…と今もしばしば悩んでいます。最低限必要な情報が見られなくしまうのはまずいですが、なくても困らないようなものはあえて表示しなくていいということもあるのでは…と。

コンテキストによって提供する情報の範囲を変える（ただしなるべくアクセス不能にはしない）という視点で、もう少し考えてみたいと思っています。