SVGを表示するにはいくつか方法があります。
pngやjpgと同じように <img> を使って表示する場合はいつも通り代替テキストとしてalt属性を使えばよいのですが、SVGスプライトや vue-svg-loader を使うなどで <svg> をHTMLにインラインで書き出したい場合もあると思います。
<svg> には代替テキストの機能は存在しないので、代わりとなる機能がないか探してみました
<title> を使う方法
SVGファイル内に <title> を入れておくことで、マシンリーダブルにすることができます。
ただしこの方法には、
- カーソルを合わせるとツールチップが出てしまう
- .svg ファイル内に存在することになるので、管理がしづらい
などの取り回ししづらい部分があり、imgのaltと比べてもなんかいまいち。
WAI-ARIAを使う方法
そこでおすすめしたいのがこちら
<svg> に対して role="img" aria-label="テキスト" を付ける方法です
<svg role="img" aria-label="画像の説明" ...>
...
</svg>
この方法は MDNのimgロールのページ でも言及されていました。
ARIA属性は、付与できる要素に制限がないため、例えば複数の画像をまとめてひとつのものとして認識してもらいたい場合などにも使うことが出来ます。
<div role="img" aria-label="画像の説明">
<svg ...>
...
</svg>
<svg ...>
...
</svg>
</div>
<title> を使う方法と比較して管理のしやすさや組み込み方自由度が高く、非常に有用だと思います