インラインSVG画像の代替テキスト（alt）の設定について

WRITER

Sasayama Sayaka ディレクター

ディレクター。ウェブデザイン技能士（2級）／HTML5プロフェッショナル認定資格レベル1・レベル2。

画像の拡張子と言えばjpgやpngが一般的ですが、WEB制作ではSVG画像も多く扱います。
その時にSVG画像をインラインのSVGコードで扱う場合、どのように代替テキストを設定したらいいのでしょうか？

先に結論を書くと、インラインのSVGコードに対する代替テキスト（alt）は以下のような記述を推奨します。

<svg role="img" aria-label="画像の情報を記述">

　<!-- SVGコード -->

</svg>

「role=”img”」を使用すると、複数の画像を一つのものとして認識させることができます。
ですので、SVGコードに指定することでそれを一つの画像としてみなし、ラベルによってその画像の意味を説明することができます。

また、alt設定同様にスクリーンリーダーによる読み上げも行われるのでアクセシビリティ的にも問題ありません。

ARIA: img role

もう一つ、タイトル要素を設定する方法もあります。

<svg>

　<title>画像の情報</title>

　<!-- SVGコード -->

</svg>

こちらの方法でもスクリーンリーダーによる読み上げは行われるようです。

注意点としては、title要素は親要素の最初の子要素にする必要があります。
また、ホバーするとツールチップが表示されるので、それが気になる場合は①の方法を利用するといいでしょう。

簡単に悦明すると、Webサイト上の画像に設定する「画像の代わりとなるテキスト」です。

インターネット環境によって画像が読み込まれない場合に代わりにテキストとして表示されたり、
スクリーンリーダーによる読み上げで目の不自由な人へ画像の内容を伝えることが出来る重要な要素です。

代替テキストはクローラーに認識される為に、時々SEO対策の一つとして設定が推奨されることがあります。

しかし代替テキストを設定する上で重要なことは、SEOの観点から設定するのではなく、
ウェブアクセシビリティの観点から設定するということです。

ウェブアクセシビリティとは

この点を間違えずに、正しく代替テキストを設定したいですね◎

JOURNALが気に入ったら「いいね」してね！