近年、SVG 画像を利用するウェブサイトも増えてきていると思います。僕の事業サイトなどでもアイコンで利用したりすることが増えてきました。
img タグを使って表示する画像であれば、alt 属性を使って代替テキストを設定することができます。
では、SVG 画像の場合に、この img タグの alt 属性で提供するような代替テキストを設定するためには、どうしたら良いのでしょうか。
role と aria-labelledby と title を使う
個人的な完成系は以下のような形になりました。
<svg role="img" aria-labelledby="hoge" 〜>
<title id="hoge">代替テキストとしてのテキストを設定</title>
<path d="〜" />
</svg>この構造では、SVG を画像として扱い、代替テキストを与えるようにしています。
role="img" は、この「この SVG を画像（img）として扱ってください」という意味になります。スクリーンリーダーに対しても「これは装飾ではなく意味のある画像です」ということを伝えることができます。
SVG はデフォルトでは role が曖昧になることがあるので、意味を持たせたい場合には明示すると良いでしょう。
参照：WAI-ARIA ロール
また、aria-labelledby="hoge" は、この SVG のアクセシブルネーム（読み上げ名）を id="hoge" を持つ要素の内容で決めるという指定をしています。
つまり、スクリーンリーダーは「この SVG の名前は hoge という ID を持つ要素のテキストで定められている」と認識して扱います。
最後に <title id ="hoge">〜</title> では、先ほど紹介した hoge という ID が付与されているテキストとなるため、この SVG の正式な名称として認識されます。
よって、ここに書かれているテキストが、スクリーンリーダーに読み上げられ、アクセシビリティツリー上の名前になるということになります。
注意点
注意することとしては、ID は一意のテキストにする必要があります。これは HTML を記述したことがある方であればご存知の内容ではあると思いますが、気をつけておきましょう。
まとめ
SVG 画像をこのように実装することによって、img + alt のような意味合いを持たせることができます。
日本国内においては、まだまだ web のアクセシビリティに対しての要件が低く考えられるケースがありますが、基本的な実装としてこれらを身につけておくことで、付加価値を提供できる実装者として認識してもらえるかもしれません。ぜひ覚えておきましょう。
