title

title グローバル属性は、要素に関するアドバイザリー情報を表すテキストを含みます。

試してみましょう

典型的な用途は以下の通りです。

  • <iframe> 要素の支援技術のためのラベル付け
  • プログラム的に関連付けれた<input> 要素のためのラベルを、実際の <label> の代替として提供
  • データ表内のコントロールのラベル付け

title 属性は <link>, <abbr>, <input>, <menuitem> の各要素において、追加の意味を持ちます。

複数行のタイトル

title 属性は複数の行を含むことができます。それぞれの U+000A LINE FEED (LF) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように二行にわたって描画されることです。

HTML

<p>Newlines in <code>title</code> should be taken into account,
like <abbr title="This is a
multiline title">example</abbr>.</p>

結果

title 属性の継承

要素に title 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。

この属性が空文字列に設定されると、その祖先の title が関係なく、この要素のツールチップとして使用するべきではないことを意味します。

HTML

<div title="CoolTip">
  <p>Hovering here will show “CoolTip”.</p>
  <p title="">Hovering here will show nothing.</p>
</div>

結果

アクセシビリティの考慮

title 属性を使用することは、次のような人々にとって大きな問題になります。

  • タッチのみの機器を使用している人々
  • キーボードで操作している人々
  • 読み上げソフトや拡大鏡などの支援技術で操作している人々
  • 細かい運動制御障碍を経験している人々
  • 認知障碍のある人

これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできるもっとアクセシブルな技術を使用する方が効果的です。

仕様書

Specification
HTML Standard
# the-title-attribute

ブラウザーの互換性

BCD tables only load in the browser

関連情報