Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2005年11月 > a要素とtitle属性

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2005年11月11日

a要素とtitle属性

フロントエンド・エンジニア 木達

a要素とtitle属性の実装手法について、以下のようなご質問をいただきました。

PC-Talkerではaタグ内の要素よりtitle属性が優先されるということでtitle属性をつけるとこちらを読み上げます。基本的に目で見える情報と音声で聞く情報は同じものを提供することを考えると

<p><a href="xxx" title="このページの最初へ">このページの最初へ</a></p>

になってしまいます。これでは、特定のブラウザに特化しすぎて本来の使い方と違うと思うのですがどのように判断をすればよいのか非常に迷っています。

aタグのtitle属性の使い方について何かご意見・アドバイス・見解をいただけるとうれしいです。

ご存知無い方のために補足しておきますと、PC-Talkerというのは高知システム開発さまが開発・販売されているスクリーンリーダー(音声読み上げソフト)で、目の不自由な方が主にお使いになるものです。質問者の方は、title属性を付与したa要素をPC-Talkerに読み上げさせた場合、a要素としてマークアップした内容を読まずにtitle属性値を読み上げる状況に、どう対応すべきかといった趣旨の質問をされています。

まずtitle属性の定義を確認しておきますが、HTML 4.01の仕様書にはThis attribute offers advisory information about the element for which it is set.とあり、ある要素について助言のような情報を付与する際に用いられます。概してtitle属性は、無くても困らないけれども、あれば文書上にある情報の理解や利便性が高まる類の情報を提供するもの、と思います。

同じく仕様書にはValues of the title attribute may be rendered by user agents in a variety of ways.とあります。これは閲覧環境によってさまざまに表示され得る(表示されない環境もあり得る)ということを述べています。どのように表示されるかは閲覧環境の実装に依存するため、ある特定の環境のみを想定しそれに最適化することは、Webアクセシビリティの観点からすると好ましくないでしょう。

さて、質問者の方が例としてお書きになっているソースでは、PC-Talker以外の音声読み上げ環境で「このページの最初へ」という同じ文言が二度読み上げられる可能性があり、その点で好ましい実装とはいえません(聞き苦しいし、理解を妨げる懸念もあります)。また、PC-Talkerに対して最適化するあまり、別の環境では表示されない(読み上げられない)かもしれないtitle属性値に重要な情報を記述している点からも、好ましいとはいえないでしょう。

繰り返しになりますが、title属性は助言的な情報を提供すること、またtitle属性値がどのように表示されるかは閲覧環境次第であること、この二点に留意する必要があります。助言的情報のtitle属性値を読み上げて、肝心の(より重要な情報と位置づけられるはずの)リンクテキストを読み上げない閲覧環境というのは、筆者個人にはとても奇異に感じられます。しかしそのような環境が実在する以上、ことa要素に関しては、助言的情報もリンクテキストの一部として記述するようにし、title属性は用いないほうがよりアクセシブルであると思います。

また、同じ質問者の方より以下のような現象をお教えいただきました。

<a href="xxx"><img src="xxx" alt=""></a>のようなパターンです。

ただ、直後に同じ飛び先のテキストのリンクを設置する必要があり「ダブリの読み上げは避けたい、でもCSSの効かないブラウザでもこのボタン画像は表示させておきたい」とのクライアントの要望から、画像のaltを空に対応をしています。

PC-Talkerの全文読みとホームページリーダではimgのaltが空なので読み飛ばしをしてくれるのですがPC-Talkerのリンクのみの飛ばし読みだと画像のファイル名が読み上げられてしまうという現象です。

聞かされてもあまり意味を成さない画像のファイル名の読み上げを避けるにはどうすべきかですが、これはPC-Talkerの「飛ばし読み」に固有な事象であって、それに対しどこまで重きを置いて実装するかという、バランスの問題になるかと思います。もし同環境においてより有意な読み上げを実現すべきであれば、二重の読み上げを許容するか、あるいは画像のalt属性値を空にする前提を諦め、同じリンク先のテキストリンクの設置を諦めるといった方策を検討せざるを得ないのではないでしょうか。