imgタグのalt属性を設定すべきタイミングについて考える

この記事は2022/12/01に作成されました。

alt属性って何だろう？

alt属性はimgタグの中で用いられる属性です。通信が不安定、画像のリンクが切れた等で画像が正常に表示できなかった場合、その画像の代わりに表示されるテキストを設定します。

また、alt属性に設定されているテキストは、スクリーンリーダーや音声ブラウザ使用時にも、読み上げられるようになります。
つまり、alt属性はWEBアクセシビリティの向上や対策の点でも決して無視してはいけないのです。

さらに、画像には当然テキスト要素がありません。
そのため、Google等のサーチエンジンクローラーに画像の情報を理解させる補助としての役割もあります（既知の事実ですが、クローラーは画像に対しては「ここに画像がある」というレベルの認識しかしてくれません）。
alt属性を適切に設定する事は、結果的にSEO対策にもなります。

全ての画像にalt属性を設定するべきなのか？

結論から言うと、私は全ての画像にalt属性を設定する必要はないと考えています。

本来不要な情報をユーザーに読ませたり（聞かせたり）、サーチエンジンクローラーに認識させ、コンテンツの伝達力を阻害してしまいかねないからです。

例えば、音声ブラウザを使ってニュース記事の見出し部分を読み上げた結果、

2022年12月1日、
カテゴリー：ニュース、
ニュースのアイコン、
2022年も残りわずか。美味しい蟹の情報をお届けします、
ニュースのアイキャッチ
...（以下、本文）

と、読み上げられたとします。
いかがでしょう、「ニュースのアイコン」「ニュースのアイキャッチ」辺りで引っかかりを感じませんか？

まさにこの2つはimgタグで挿入された画像で、音声ブラウザはalt属性に設定されたテキストを読み上げています。
更に、この2つは「これは画像（=アイコン、アイキャッチ）である」ことしかalt属性で説明されていません。よって、その他の情報（日付やタイトルなど）の読み取りの邪魔になっています。

alt属性を設定すべき/しない方が良い画像

ここからは具体的にどんな画像にalt属性を設定すべきか、しない方が良いかを紹介していきます。

alt属性を設定すべき画像

画像で表現されたテキスト

デザインが凝ったサイトやLPでは、お洒落な文字を画像にして使用している事も多いでしょう。また、CSSでの表現が難しいボタンやリンクなどでも画像が使用されることがあります。
この場合には必ずalt属性を設定しましょう。
特に見出し（hタグ）で使用している場合は絶対に設定を忘れてはいけません。見出しにはサイトやページの重要なキーワードが含まれている為、文字情報が無いとSEO的に非常に不利になります。
（そもそも、Googleは特に重要な見出しはできるだけテキストで表現する事を推奨しています。）

テキストが添えられていないアイコン

アイコンのそばに、そのアイコンが何なのかを示すテキストがない場合はalt属性を設定すべきでしょう。
ヘッダーにある通知やログインのアイコン、SNSシェアボタンなどはテキストを添えずアイコンだけを表示するデザインも多いです。
もし正常に画像が表示されないと何もないと思われ、折角のログインの機械やSNSシェアのチャンスを逃してしまいます。

バナー画像

バナーはユーザーの注目を集めたり誘導をするなど、意味的にもビジュアル的にも重要な画像要素です。サイトのメインビジュアル、広告などで使われていることが多いですね。
バナーに書かれている文字はもちろん、そのバナーがとあるサービスやブランドのものである場合は、サービス名やブランド名もalt属性に含めた方が良いでしょう。

グラフ・表の画像

グラフや表がコンテンツの途中で登場した場合、そのデータを踏まえてそこから先の話が展開されることを考えると、必ず設定すべきでしょう。
文章化すると多少長くなってしまうかもしれませんが、その場合はそこから先で言及するデータのみを抜粋する形でも構いませんので、しっかり伝わる文章にして入れ込みましょう。

画像がないと意味が成り立たないコンテンツに使われる画像

時々、画像自体に意味を持たせて展開されるコンテンツを見かけることがあります。
例えば、以下のような文章と画像を組み合わせたコンテンツがあったとします。

猫のタマがいます。
（ご飯を食べる猫の画像）
お腹がいっぱいになったタマは昼寝を始めました。

これを音声ブラウザで読み上げたとき、alt属性が設定されてないと、
「猫のタマがいます。お腹がいっぱいになったタマは昼寝を始めました。」
と意味が正しく伝わらない文章になってしまいます。

このように画像が特定の意味を持ちつつも、前後のコンテンツではその画像に関する言及がない。こんな使われ方をする画像にもalt属性を設定すべきでしょう。
上の例をそのまま使うなら、alt属性には「タマはお昼ご飯を食べました。」などと入れるのが良いでしょう。

特にキャプションがない場合は必ず設定した方が良いです。キャプションの内容=画像の説明が成り立ちそうなら、alt属性を設定しない方が良い場合もあるので臨機応変に対応しましょう。

alt属性を設定しない方がよい画像

装飾、雰囲気づくりのための画像

一番初めに出したニュース記事の例のように、装飾目的の画像にalt属性を設定すると余計な情報が入る事になり、コンテンツの伝達力が落ちるので注意しましょう。
この記事にも何枚か画像を使っていますが、ほとんどは雰囲気づくりや読み手の視覚的なマンネリを防ぐ為に使っているので、alt属性は設定していません。

テキストが添えられたアイコン

アイコンのそばにテキストが添えられている場合、もし画像が正常に表示れなくてもそのテキストが生き続けてくれるので、alt属性を設定する必要はありません。
あくまで、そのアイコンは「装飾」として扱われるからです。

「キャプションの内容=画像の説明」が成り立つ画像

先述の「alt属性を設定すべき画像―画像がないと意味が成り立たないコンテンツに使われる画像」と被りますが、すでにキャプションとして読める形になっているなら、わざわざ画像にalt属性を設定する必要はありません。
しかし、「キャプションの内容≠画像の説明」であり、なおかつ画像が装飾ではなくきちんと意味が与えられている場合は、alt属性を設定した方が良いでしょう。

alt属性を理解して、誰もが便利に参照できるコンテンツを作ろう

alt属性を正しく設定できるようになると、トラブル発生時、障がいのあるユーザー、SEO対策など、WEBサイトのあらゆる惜しい部分をカバーできるようになります。
コンテンツが伝えたい情報を誰もが容易く理解できるよう、画像に与えられた意味・役割を考えてデザインやコーディングを行うことが大切です。