HTMLのtitle属性を正しく使用するためのいくつかの提案

携帯電話やタブレット端末、支援技術を使うユーザーには特定のコンテンツを隠し、キーボードを使うユーザーにだけ表示したい場合は、title属性を使用します。
詳細
HTMLのtitle属性自体に問題がある。14年以上の歴史があるにもかかわらず、いくつかの重要な点でパフォーマンスが低下していることが問題なのです。タッチデバイスの台頭により、この属性の有用性はさらに低下しています。ブラウザのサポート、スクリーンリーダーのサポート、制作上の注意の不足により、title属性のアクセシビリティは不自由なものとなっています。
title属性は、以下のようなケースでサポート不足のため冗長になってしまいました。
モバイルブラウザでWebコンテンツ情報にアクセスする人向け。通常、デスクトップ用ブラウザでは、title属性の内容はヒントメッセージとして表示されます。私の知る限り、ヒントの表示をサポートしているモバイル・ブラウザはなく、title属性の内容にアクセスする視覚的な方法は、他に存在しません。
マウスが使えない方への情報です。通常、title属性の内容は、デスクトップ・ブラウザーではヒント・メッセージとして表示されます。ヒント・メッセージの動作は10年以上前からありますが、キーボードを使って title 属性を表示する方法は、これまでブラウザに実装されていませんでした。
ほとんどのHTML要素で使用でき、さまざまな支援技術を使用する人々のための情報を提供します。私の知る限り、スクリーン・リーダーは、title属性情報へのアクセスには一貫して非対応です。
title属性は、以下のように使い勝手が悪いです。
モバイルユーザー
キーボードのみのユーザー
スクリーンアンプをご使用のお客様
スクリーンリーダーをご利用の方
手先の器用さに障害のある方
認知機能に障害のあるユーザー
便利な title 属性の例です。
フレームまたはiframe要素にラベルを付ける。
<frame title="ナビゲーション">
特別な状況下で表示されるようにプログラム的に実装する必要があるラベルを提供するために、可視テキストラベルの直接使用は冗長になる：。
<input type="text" title="search"> <input type="submit" value="search">
データフォームのラベルコントロール。
title属性が役に立たない、またはあまり役に立たない例。
テキストとして使用できないリンクやその周辺のコンテンツに付加情報を加えること。
<a href="newsletters.PDF" title="PDFファイル、サイズ1 mb.">newsletters</a>
そのような情報は、リンク先のテキストの一部として、またはリンクの横に記載する必要があります。
リンク先のテキストと同じ情報を提供する。
<a href="newsletter.PDF" title="ニュースレター">ニュースレター</a>
リンクの内容をtitle属性としてコピーしないことをお勧めします。これは、本当に何もしないことと同じです。
画像のタイトルの場合。
<img src="castle1858.jpeg" title="キャンバスに油絵の具。Maria Towle, 1858."
alt="現在、城には2つの塔と2つの城壁があります。
おそらく、タイトル情報は最も重要な情報であり、デフォルトですべてのユーザーがアクセスできるようにする必要があります。もしそうであるなら、このコンテンツは画像のすぐ隣にあるべきでしょう。
フォームのタグの代わりに、可視テキストタグを削除します。
<input type="text" title="名前">
スクリーン・リーダーのユーザーは、アクセシビリティAPIでtitle属性が属性名としてリストされているため、form要素のラベルにアクセスできます（テキストラベルがlabel要素を使用する場合はサポートされていません）。他の多くのユーザーはそうではありません。可能な限り、目に見えるテキストタグを含めることをお勧めします。
可視ラベルの内容と同じ情報をform要素に提供する。
<label for="n1">name</label> <input type="text" title="name" id="n1">./label>./label> <input type="input/right"id="name"/label>./label>
可視タグのテキストを繰り返すことは、一連のユーザーの知覚ノイズを追加する以外にありえません。やってはいけません。可視タグのテキストを繰り返すことは、一連の煩わしい認識ノイズを追加する以外にはないようです。この使い方をやめましょう。
フォーム要素に対する追加指示を行う。
<label for="n1">name</label> <input type="text"title="Please use uppercase."id"n1& quot;>./label>
このディレクティブが form 要素を適切に使用するために重要である場合、すべてのユーザーが読めるように要素の周囲にテキスト情報を提供します。
略語の延長として。
<abbr title="world wide web consortium">W3C</abbr>
abbr要素のtitle属性はスクリーン・リーダー・ソフトウェアでサポートされていますが、他のユーザー・グループでは利用できないため、使用にはまだ問題があります。頭字語が最初に文書に現れるときには、完全な名称をテキスト形式で提供するか、完全な形式での用語集を提供することが推奨されます。これは、title 属性を使用すべきでないということではなく、title 属性には限界があり、テキスト形式での完全な名称を提供すべきなのです。
HTML 5.1では、title属性の使用について一般的な推奨事項が記載されています。
title 属性に依存することは、多くのユーザエージェントがこの仕様で要求されるように表示できない（例えば、マウスポインタデバイスがプロンプトメッセージを表示させることを要求し、キーボードのみのユーザやタッチスクリーンのユーザを除外する）ことから、現在推奨されていない。
img 要素の alt 属性の代わりに title 属性を使用すること、および画像のタイトルとして使用することは禁止されています。
title属性に依存することは、多くのユーザーエージェントがこの属性のアクセシビリティを弱くサポートしているため、現在禁止されています......。