<title> — SVG アクセシブル名要素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<title> は SVG の要素で、 SVG のコンテナー要素またはグラフィック要素のアクセシブルな短いテキストの説明を提供します。

<title> 要素内のテキストはグラフィックの一部としてレンダリングされませんが、ブラウザーは通常ツールチップとして表示します。要素が可視テキストで記述されている場合、 <title> 要素を使用するのではなく、 aria-labelledby 属性でそのテキストを参照することが推奨されます。

メモ: SVG 1.1 との後方互換性のため、 <title> 要素は親の最初の子要素であるべきです。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="4">
    <title>これは円です</title>
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>これは四角形です</title>
  </rect>
</svg>