HTML Living Standard/title属性

title属性

title属性は、HTML要素に関する追加情報を提供するためのグローバル属性です。この情報は、ユーザーが要素にマウスカーソルを合わせた際に、ツールチップとして表示されます。主に補足説明やヒントを提供する目的で使用されます。

基本構文

<element title="説明テキスト"></element>

説明テキスト: 要素に関連する補足情報を記述します。

使用例

以下は、title属性を使った例です。

<!-- 画像に説明を追加 -->
<img src="example.jpg" alt="サンプル画像" title="この画像はサンプル用です">

<!-- リンクに補足情報を追加 -->
<a href="https://example.com" title="公式ウェブサイトにアクセスします">公式サイト</a>

<!-- ボタンにヒントを追加 -->
<button title="クリックして送信します">送信</button>

動作の概要

表示方法:
- title属性の値は、通常、マウスカーソルを要素上にホバーしたときに表示されます。
- このツールチップは、ブラウザによってスタイルや挙動が異なります。

非表示の要素:
- 要素がdisplay: none;またはvisibility: hidden;で非表示の場合、title属性は表示されません。

title属性の利用シーン

画像の補足情報:
- alt属性と併用することで、視覚的な説明や補足情報を提供できます。

リンクの説明:
- ユーザーにリンク先について追加情報を提供する際に便利です。

フォーム要素のヒント:
- ボタンや入力フィールドに操作説明を追加することで、ユーザー体験を向上させます。

title属性のアクセシビリティ

title属性は便利な補足情報を提供できますが、アクセシビリティの観点から以下の注意が必要です。

スクリーンリーダー:
- 一部のスクリーンリーダーはtitle属性を読み上げますが、確実ではありません。
- 重要な情報は、aria-labelやaria-describedbyなどのARIA属性で補足することを検討してください。
キーボード操作:
- title属性の内容は、通常キーボード操作だけでは表示されません。
- ツールチップの内容が重要な場合は、HTML内で明示的に記載する方法を推奨します。

JavaScriptを使用した動的変更

JavaScriptを使用して、動的にtitle属性を変更することが可能です。

<button id="dynamicButton" title="最初の説明">ボタン</button>

<script>
  document.getElementById("dynamicButton").addEventListener("click", function() {
    this.setAttribute("title", "クリックされました");
  });
</script>

この例では、ボタンをクリックすると、title属性の内容が「クリックされました」に変更されます。

注意点

title属性は、あくまで補足情報として利用するべきです。重要な情報は、文書内に明示的に記述してください。
過度に長い内容を指定すると、ツールチップが一部のみ表示される場合があります。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献