HTML の title 属性を正しく使用するためのヒント

コンテンツを携帯電話、タブレット、支援技術のユーザーから非表示にし、キーボードのユーザーにのみ表示する場合は、title 属性を使用します。
詳細

HTML の title 属性自体に問題があります。問題は、14 年以上も私たちと共にあるにもかかわらず、いくつかの重要な点で不十分であるということです。タッチデバイスの登場により、このプロパティの有用性はさらに低下しました。ブラウザのサポート、スクリーンリーダーのサポート、開発者の注目が不足しているため、タイトル属性のアクセシビリティは少し残念なものになっています。
次の場合には、サポートされていないため、 title 属性は不要になります。

モバイルブラウザーで Web コンテンツ情報にアクセスするユーザー向け。通常、タイトル属性の内容はデスクトップブラウザーでツールチップとして表示されます。私の知る限り、ツールチップの表示をサポートしているモバイルブラウザーはなく、タイトル属性の内容に視覚的にアクセスする方法は他にありません。
マウスを使用できない人のための情報を提供します。通常、タイトル属性の内容はデスクトップブラウザーでツールチップとして表示されます。プロンプト情報の動作は 10 年以上前から存在していますが、キーボードを使用して title 属性を表示する方法を実装したブラウザーはありません。
さまざまな支援技術を使用するユーザーに情報を提供するために、ほとんどの HTML 要素で使用されます。私の知る限り、スクリーンリーダーはタイトル属性情報へのアクセスをサポートしていません。

タイトル属性は次のようにユーザーフレンドリーではありません

携帯電話ユーザーキーボードのみを使用する人画面拡大鏡を使用する人スクリーンリーダーを使用する人微細運動能力に障害のある人認知障害のある人

便利なタイトル属性の例:

フレームまたは iframe 要素にラベルを付けるには:
<frame title="ナビゲーション">
特別な状況でのみ表示され、プログラミングが必要なラベルを提供します。表示されるテキストラベルを直接使用するのは冗長です。
<input type="text" title="検索"> <input type="submit" value="検索">
データグリッド内のラベルコントロール。

title 属性が役に立たない、または用途が限られている例:

テキストとして利用できないリンクまたは周囲のコンテンツに追加情報を追加するには:
<a href="newsletter.PDF" title="PDF ファイル、サイズ 1 mb">ニュースレター</a>
代わりに、そのような情報はリンクテキストの一部として、またはリンクの横に含める必要があります。
リンクテキストと同じ情報を提供します。
<a href="newsletter.PDF" title="newsletter">ニュースレター</a>
リンクの内容をタイトル属性としてコピーしないことをお勧めします。これは実際には何もしないことと同じです。
画像に使用するタイトル:
<img src="castle1858.jpeg" title="キャンバスに油絵の具で描いた作品。マリア・タウル、1858 年。"
alt="城には現在 2 つの塔と 2 つの壁があります。">
おそらく最も重要な情報であり、デフォルトですべてのユーザーがアクセスできる必要があります。もしそうなら、このコンテンツは画像のすぐ隣に配置する必要があります。
フォームラベルを置き換え、表示されているテキストラベルを削除するために使用します。
<input type="text" title="名前">
タイトル属性はアクセシビリティ API で属性名としてリストされているため、スクリーンリーダーユーザーはフォーム要素のラベルにアクセスできます (テキストラベルにラベル要素を使用する場合は、これはサポートされません)。他の多くのユーザーはそうしません。可能な場合は、目に見えるテキストラベルを含めることをお勧めします。
フォーム要素の表示ラベルコンテンツと同じ情報を提供します。
<label for="n1">名前</label> <input type="text" title="名前" id="n1">
目に見えるラベルテキストを繰り返すと、ユーザーの認知ノイズのレベルが上がるだけです。やめなさい。目に見えるラベルテキストを繰り返すことは、迷惑な認知ノイズを追加する以外に何の役にも立たないように思われるので、使用を中止してください。
フォーム要素に追加のディレクティブを提供します:
<label for="n1">名前</label> <input type="text" title="大文字を使用してください。"id="n1">
フォーム要素を正しく使用するために指示が不可欠な場合は、すべてのユーザーが読めるように要素の周囲にテキストを配置します。
略語の拡張として:
<abbr title="ワールドワイドウェブコンソーシアム">W3C</abbr>
abbr 要素の title 属性はスクリーンリーダーソフトウェアでサポートされていますが、他のユーザーグループがアクセスできないため、使用には依然として問題があります。略語の完全な名前は、文書内で初めて登場するときにテキスト形式で提供するか、用語集で提供することをお勧めします。これは、title 属性が使用できないという意味ではありませんが、制限があり、完全なタイトルをテキスト形式で提供する必要があります。

HTML 5.1 には、title 属性の使用に関する一般的な推奨事項が含まれています。

現在、多くのユーザーエージェントが仕様で要求されているようにこの属性を表示できないため、 title 属性に依存することは推奨されていません (たとえば、ツールチップを表示するにはマウスポインティングデバイスが必要で、キーボードのみのユーザーやタッチスクリーンのユーザーは除きます)。

img要素のalt属性の代わりにtitle属性を使用したり、画像のタイトルとして使用したりすることは禁止されています。

多くのユーザーエージェントでこの属性のアクセシビリティサポートが弱いため、現在、title 属性に依存することは禁止されています...

<<: Vueはアコーディオン効果を実装する

>>: Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプルコード