img要素のalt属性に設定する適切な代替テキストの考え方

ウェブページで画像を表示させるために「img要素」が使われますが、このimg要素に設定できる属性の1つに、画像の代わりとなる文章「代替テキスト」を設定する「alt属性」があります。

代替テキストを適切に設定することは「SEO」や「ウェブアクセシビリティ」において重要です。しかし、どのような文章を設定すればいいのか分からない方も多いのではないでしょうか？

そこで今回は適切な代替テキストを設定するための考え方を紹介します。

画像の代替テキストは画像を使用する意図で決める

結論から言えば「画像の代替テキストは画像を使用する意図で決める」ということになります。

適切な代替テキストが分からなくなったり、難しく感じるのは当然です。なぜなら、同じ画像を使っていても、全体の内容や画像前後の文脈によって適切な代替テキストも変わってくるからです。

誰かが何かを意図して撮った画像を、その意図に気付かず使えば、本来の意図とは全く異なる代替テキストになる可能性もあります。

例題:「マスクをするモナ・リザ」の代替テキストを考えてみる

次の「マスクをするモナ・リザ」の代替テキストとして適切となり得る例を挙げてみます。

1. 代替テキストを設定しない

仮に画像が無かったとしても、あるいは、他の画像に置き換えたとしても、読んでもらいたい内容に一切影響を与えない場合には、代替テキストを設定しないことが適切になり得ます。

内容や文脈の雰囲気など、言葉では表せない何かを伝えるためだけの画像がこれにあたります。

また、画像に設定した表題 (キャプション) や前後の文章で画像を説明する内容があり、代替テキストと競合したり、冗長になってしまう場合にも、代替テキストを設定しないことが適切になり得ます。

2. 写っている内容をそのまま表した代替テキスト

画像が読んでもらいたい内容の中心になる場合、「マスクをするモナ・リザ」のように、写っている内容をストレートに表した代替テキストが適切になり得ます。

ただし、これは「モナ・リザ」が何かを知っている人向けです。

「モナ・リザ」を知らない人向けの代替テキストであれば、「『荒涼とした風景を背に腕を組む女性』を描いた名画『モナ・リザ』の女性にマスクを着けたパロディ」のような代替テキストになるでしょう。

誰に画像を見せるのかを考え、代替テキストを設定しましょう。

3. 文脈に沿った代替テキスト

画像を使用した意図そのものが適切な代替テキストになり得ます。

例えば、「〇〇を笑ってはいけない」という内容の中で、このモナ・リザの画像を使用する場合、「マスクをするモナ・リザ」よりも本来の意図に近い「微笑みを禁止されたモナ・リザ」の方が代替テキストとしては適切でしょう。

4. そこに画像があるということを伝えるための代替テキスト

前述した通り、代替テキストを設定しないことが適切になり得えますが、場合によっては、何らかの代替テキストが必要となる場合もあります。

例えば、画像にリンクが設定してある場合です。代替テキストが無いと空リンクとなり、「SEO」や「ウェブアクセシビリティ」の観点からすると良くありません。

こういった場合には、画像ファイル名を代替テキストに設定すると良いでしょう。

<a href="monalisa-with-mask.jpg"><img src="monalisa-with-mask.jpg" alt="monalisa-with-mask.jpg" /></a>

ただし、画像を表示させることよりも、リンクさせることが主目的の場合は、リンクするテキストとして適切な代替テキストが相応しいでしょう。

<a href="monalisa-with-mask.jpg" download="monalisa-with-mask.jpg"><img src="monalisa-with-mask.jpg" alt="「マスクをするモナ・リザ」の画像をダウンロード" /></a>

〆

適切な代替テキストは、画像を作る意図、画像を使う意図、内容や文脈、さらには「SEO」や「ウェブアクセシビリティ」の観点、これらを考慮する必要があります。

「SEO」や「ウェブアクセシビリティ」に気を使うのであれば、今まで何気なく使っていた画像の代替テキストをチェックしてみてはいかがでしょうか？