title属性についての疑問をこれまたぐだぐだと書いてみた。

HTMLのtitle属性は、本当にアクセシビリティに本当に有効なのだろうかと、前々から疑問に思っていてので、自分が感じている疑問を書きます。

title属性

title属性というのは、ある要素に対して補足情報を付け足す属性です。そして、以下のように説明されています。

title = text [CS] この属性は、当該要素に関する助言的情報を提供する。 文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。 title属性の値は、ユーザエージェントによって様々にレンダリングされるであろう。 例えば、視覚系ブラウザはタイトルを「ツールチップ」 (ポインティングデバイスがオブジェクトの上にある際に現れる短いメッセージ) として表示しがちである。音声ユーザエージェントは、同様の文脈で、タイトル情報を話すであろう。 次のようにリンクにtitle属性を設定すると、視覚系か非視覚系かを問わず、 ユーザエージェントはユーザに対してリンク先資源の性質を知らせることができる。

また、いろんなアクセシビリティTipsなどでも書かれており、さらに、以前、自分のブログの「今日から始れるWebページをアクセシブルにする10のWebアクセシビリティTips」でも、書いたとおり、意味のあるtitle属性をつけることにより、リンク先のページなどの補足説明になるため、スクリーンリーダ・ユーザにとってユーザフレンドリーな属性であると書きました。

ユーザフレンドリーな属性であるのは間違いないと思うのですが、しかし、実際、スクリーンリーダ・ユーザはどれくらいtitle属性を参考にしているのでしょうか?

スクリーンリーダなどにおけるtitle属性

実際問題、僕自身がスクリーンリーダを持っていないので、なんとも言えないのですが、スクリーンリーダによれば、title属性の読み上げのための設定がされていなければならなく、そういう設定がされていないことが多いということだ。

もし、これが事実ならば、title属性というのは、それほどアクセシビリティ的に大きな効果を与えることがないように思える。

title属性と同じ効果を与える方法

ぜひ「ウェブアプリケーションのためのユニバーサルデザイン」の43ページを参考にしていただきたい。

その書籍には、spanタグとCSSを使っている。

通常、title属性を用いた補足は以下のようになる

<a href="./hoge.html" title="hogeについて書かれたページ">hogeのページ</a>

こうだと、title属性の読み上げの設定がされていないスクリーンリーダなどでは、title属性が読み上げられず、title属性の意味が無く、補足説明にならない。

そして、上記の書籍では、以下のようになる。

<a href="./hoge.html">hogeのページ<span class="fuga">hogeについて書かれたページ</span></a>

補足説明の箇所をspanタグでマークアップし、これをCSSのleftプロパティを使って画面上で見えなくするのである。

注:画面上で見えなくするときに、display:none;は使わないことが重要である。display:none;を指定している要素はスクリーンリーダだと、読み上げてくれないからだ。

とまあー相変わらずぐだぐだと書きましたが、僕もわからないことばかりなので、何かtitle属性とスクリーンリーダなどに関するリソースや情報があれば教えていただければ幸いです。

さらに、間違いなどあればご指摘ください。

参考