SVG に代替テキストをつける
ウェブアクセシビリティの観点から、画像には alt つまり代替テキストをセットしなさいっていうのがあります。
読み上げブラウザのように音だけで操作している人にとって写真に写ってるものを見ることはできないから、ソレを説明するためのテキストが必要ってことですね。
写真ならどんな写真が写ってるかとか、ナビゲーションボタンならそのボタンが意味するところを書くわけで、画像の場合はそれが alt になります。
<img src="/images/example.png" alt="サンプル用画像" />SVG 要素でのやり方
昨今軽量かつ拡大縮小に強い（ベクターデータなので）ということで SVG が注目されていますが、SVGの場合はどうしたらいいでしょうか。
img 要素で画像として読み込むならば、普通に img に alt 属性があるので問題ありませんが、svg 要素で直接書く場合、この要素には alt 属性がありません。
role と aria-label を適切に設定する
svg 要素にも role や aria-label と言った属性があり、これらを使うことで読み上げブラウザに正しく画像の情報を伝えることができるみたいです
<svg role="img" aria-label="ここに代替テキスト">
<path .... />
</svg>role を img にすることで、svg 全体を1つの画像として認識させ、そこにラベルをつけてあげる、ということみたいです。
title を使う
別の方法として、 svg の中に title 要素をいれることでも、スクリーンリーダーに画像の情報を伝えることができるようです。
<svg>
<title>ここに代替テキスト</title>
<path .... />
</svg>ただし、タイトルはマウスオーバーでツールチップが出てくるので、場所によっては適さない場合もあるかもしれません。
iconify/react で代替テキスト
このサイトでもあちこちで使ってる、アイコンライブラリの iconify ですが、これの場合、<Icon> コンポーネントを読んで、プロパティでアイコン名を指定する仕組みなので、title を使うことはできなそうですが、aria-label は指定可能となってますので、これでOKそうです
<Icon
icon="octicon:mark-github-24"
className={styles['site-header-nav-icon']}
aria-label="Go to my GitHub profile"
/>参考
