定義と使い方
title属性は、
この属性を持つ要素に関する指針や説明など、参考となる助言情報を示します。一部のデスクトップブラウザではツールチップ（tooltip）として表示されます。この属性の値はテキストです。
title属性は、すべてのHTML要素に指定できるグローバル属性です。
特徴
- リンクでは対象リソースに関する説明やタイトルとして使用できます。
- 画像では画像の出典や画像に関する補足情報として使用できます。
- 段落ではテキストに対する脚注や解説として使用できます。
- インタラクティブコンテンツでは要素の使用方法に関するラベルや指針として使用できます。
- その他、Webコンテンツのアクセシビリティを考慮した助言情報を示します。
例
title属性の特徴を、使用例を通して見ていきましょう。
リンクでの使用
リンクでは対象リソースに関する説明やタイトルとして使用できます。次の例では、リンク先の対象に関する追加の説明（助言）をtitle属性で示しています。
画像での使用
<img>タグで表す画像では、重要な情報と判断される画像の出典や、画像に関する補足情報として使用できます。
画像でtitle属性を使用する際の注意点
title属性は、画像の代替テキスト（alternative text）を指定するalt属性の代わりにはなりません。alt属性の値をtitle属性に使用することは避けるべきです。この場合、スクリーンリーダーが同じ内容を不要に二重で読み上げてしまうため、視覚障害者向けのスクリーンリーダーを使用しているユーザーに混乱を与える可能性があります。title属性でalt属性の説明に対する補足説明（画像のキャプション、タイトル、または凡例）を提供してはいけません。画像に説明が必要な場合は、<figure>タグと<figcaption>タグを使用してください。title属性は、画像に補足情報が必要な場合にのみ、限定的に使用してください。
段落での使用
段落では、テキストに対する脚注や解説として使用できます。
コードの補足説明<abbr>タグは、略語や省略語を表すためのタグです。title属性と併用することで、略語の正式な意味を明確に示すことができます。
インタラクティブコンテンツでの使用
インタラクティブコンテンツでは、要素の使用方法に関するラベルや指針として使用できます。
コンテンツのアクセシビリティを考慮した助言情報
その他、Webコンテンツのアクセシビリティを考慮した助言情報を示します。これは、ユーザーがスクリーンリーダーや支援技術を通じてWebページを理解し、操作できるよう支援するものです。
これらの例は、title属性をさまざまなHTML要素でどのように活用できるかを示しています。これは、ユーザーに追加情報を提供し、Webページのアクセシビリティを向上させるために有用な手段です。
title属性の使用目的
title属性は、HTML要素に対する指針や説明など、参考となる情報を示します。主な目的は次のとおりです。
ツールチップ（Tooltip）活用
title属性は、要素に対するツールチップとして使用されます。ユーザーがマウスを要素の上に移動すると、ブラウザはtitle属性に指定されたテキストをツールチップとして表示し、その要素に関する追加情報や説明をユーザーに提供します。
ただし、ツールチップを活用する目的でtitle属性を使用する場合には、注意すべき点があります。
マウスを使用しないタッチ操作が中心の最新のスマートフォンやタブレットを利用する人、キーボードのみで操作するユーザー、微細な運動機能に障害のあるユーザーなどにとっては、ツールチップが表示されません。このような場合、title属性は有用ではないため、title属性に依存することは推奨されません。
このような場合は、CSSやJavaScriptを用いてツールチップを独自に実装することを検討できます。CSSやJavaScriptを使用すれば、ユーザーが要素をタッチした場合や、キーボード操作、またはWebアクセシビリティ支援技術によってフォーカスした場合にもツールチップを提供できます。
Webアクセシビリティ向上
title属性は、Webページのアクセシビリティ向上に役立ちます。視覚的（特にスクリーンリーダー）または機能的な制約のあるユーザーは、title属性を通じて要素に関する情報を取得できます。
ただし、次の例のような状況では、title属性は限定的に使用すべきです。
リンクテキストと同一情報の提供
リンクテキストと同じ情報を提供することは無意味です。単なる重複となるため、使用しないほうが望ましいです。ユーザーにとってはノイズを増やすだけです。
コントロールに明示的に関連付けられたテキストラベルと同一情報の提供
表示されているラベルテキストを繰り返すことは、さまざまなユーザーに認知的なノイズを追加するだけで、実質的な利点はありません。
コードの補足説明<label>タグは、ユーザーインターフェースを提供するコントロール要素のラベル（label、名前）を表します。
ただし、上記のコード例とは異なり、やむを得ずコントロール要素（<input>）にラベル要素（<label>）を使用できない場合は、title属性を使用してラベルを補う必要があります。
スクリーンリーダー向けのaria-labelまたはaria-labelledby属性の使用
スクリーンリーダー向けにラベルを提供することを目的とした、ラベルテキスト用の属性があります。
ラベルテキストを提供するために、要素に対する指針や説明などの参考となる助言情報を示すtitle属性を使用するよりも、aria-labelまたはaria-labelledby属性を使用したほうが、Webアクセシビリティの向上に役立ちます。詳細については、次のリンクを参照してください。
追加情報の提供
title属性は、画像の出典、リンク先の説明、段落の脚注、引用文の出典、ボタンの動作など、さまざまな要素に関する補足情報を提供するために使用されます。
コードの補足説明<dfn>タグは、コンテンツ内で定義（defining）されている用語であることを示します。このタグにtitle属性を指定すると、その属性値が正確な用語定義の対象となります。
コードの補足説明<abbr>タグは、略語や省略語を表すためのタグです。title属性と併用することで、略語の正式な意味を明確に示すことができます。
title属性は、Webページのユーザーエクスペリエンスを向上させ、Webアクセシビリティを改善するうえで重要な役割を果たします。これを適切に使用することで、Webページの内容を明確に伝え、ユーザーに必要な情報を提供できます。
ブラウザ互換性
| 属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
|---|---|---|---|---|
title
|
1 | 12 | 1 | 4 |
仕様書
| 仕様書 | |
|---|---|
title
|
HTML Standard #the-title-attribute |