インラインSVGにalt属性を指定したい【aria-label vs title】

<svg xmlns="http://www.w3.org/2000/svg" ...>
  ...
</svg>

HTMLでインラインSVGを装飾目的以外で使う際に<img>でいうところのalt属性のような代替テキストを指定して、スクリーンリーダーによる読み上げの対象にしつつあわよくばクローラーに画像の内容を伝えたい。

解決法

1. aria-labelの指定

<svg role="img" aria-label="sample image" xmlns="http://www.w3.org/2000/svg" ...>
  ...
</svg>

role="img"とaria-label属性を指定する方法で、MDNでも紹介されている通りスクリーンリーダーによる読み上げも行われる。

個人的な体感にはなるが、どの大規模なWebアプリを見てもこの方法が一番使われている気がする。

<div role="img" aria-label="sample image"></div>

div {
  background-image: url("/img/sample-image.svg");
}

ちなみに上記のように<svg>以外の要素にも指定可能で、この方法だとCSSのbackground-imageなどで画像を表示している場合にも有効だったりする。

2. titleの指定

<svg xmlns="http://www.w3.org/2000/svg" ...>
  <title>sample image</title>
  ...
</svg>

この方法でもスクリーンリーダーによる読み上げは行われるが、ホバー時に<title>のテキストがツールチップとして不必要に表示されてしまうというデメリットがある。

SVG画像の使い分け

本題からは逸れるが、Best Practices for SVG SEO in Google ImageによるとインラインSVGはGoogleの画像検索でインデックスされることは無く、されたければ<img>で画像を表示するしかない模様。

そのため、SVG画像の表示方法は下記のように使い分けるのがベストな気がする。

使用背景	表示方法
単純な装飾	インラインSVGもしくはCSS
画像検索でインデックスされたい	<img>
装飾目的ではない且つ画像検索でインデックスされたくない	インラインSVGでrole="img"とaria-label属性を指定