みなさんこんにちは。今回は img タグの alt 属性についてなぜ付与しているのかわからないままではありませんか？実はalt属性にはSEO観点で重要な意味があります。この記事ではなぜalt属性がSEOに効果があると言われるのかを説明していきます。
alt属性とは？
まず画像をサイトに貼ると、HTMLでは上記の画像のようにimgタグに変換されます。imgタグにはアクセシビリティの観点から alt属性を必ずつけるべきとされています。alt はalternativeの略語です。日本語にすると代替テキストという単語になるようです。alt属性は画像の代替テキストとして利用され、クローラがどのような画像かを認識するために付与されるものです。
このような説明が一般的に周知されている典型的な説明になります。ではなぜ alt 属性がアクセシビリティ（SEO）対策になるのでしょうか？
alt 属性がない場合はどうなるのか？
alt属性についてより深堀りしてみましょう。alt 属性について詳しく記載した Google のサイトから引用します。
代替テキスト（画像について説明するテキスト）は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。
https://developers.google.com/search/docs/advanced/guidelines/google-images?hl=ja
説明の後半にある低帯域幅のネットワークを使用というのは回線が遅いということです。これは画像が重ければダウンロードに時間がかかるため、表示されるまでの間には代替テキストを表示しておく意味を持ちます。画像が遅いと以下のような表示になります。ここで指定した alt 属性である「altってなんだろう？」が表示されるわけです。
alt属性とスクリーンリーダー
さて説明の前半にあるスクリーンリーダーとはあまり聞きなれない単語です。これは簡単に言えば読み上げ、スピーチ機能です。筆者は利用したことがなかったので、早速使ってみることにしました。この記事をスクリーンリーダーで読ませてみましょう。
「（前略）みなさんこんにちは。今回は img タグの alt 属性について解説します。altってなんだろう。イメージ。まず画像をサイトに貼ると、HTMLでは上記の画像のようにimgタグに変換されます...」と読み上げられます（iOSのVoiceOver）。
...代替テキストの使われ方が想像つきましたか？そうです、画像の代わりに代替テキストが読み上げられるのです。だとするとこの文章が音声で読み上げられたとしても、文脈に沿ってどのような画像かを正しく説明するテキストをalt属性には設定しなければなりません。
筆者は恥ずかしながらスクリーンリーダーの存在を知りませんでした。これまで付与してきたalt属性に謝りたい気持ちでいっぱいです。ということでアクセシビリティの観点で alt 属性 は絶対に設定しましょう。ちなみに意味のない装飾用途の画像ならば空文字でもかまいません。alt="" のようにalt属性自体は設定しておくとべきとされています。alt属性をつけない場合はファイル名が読み上げられてしまいます。
それでは次の記事でお会いしましょう👋