その3. アクセシビリティの改善に！画像の代替テキストの追加
※この記事は「ウェブ担当者のためのサイト改善」のコンテンツです。よろしければマガジンの方もご覧ください。
ウェブサイトに画像を表示させるタグには「ALTテキスト」が設定できます。実は古くからSEO対策でも活用されていましたし、Googleも公式にその必要性を認めていますが、制作会社でも重要度が認識していない担当者が多く、設定されていない状態で納品されたり、そもそも制作時に確認をされていないといったことも頻繁に伺います。
ALTテキストを追加したり、修正することは担当者自身で行うアクセシビリティの基礎対策としておすすめです。特に現時点でALTテキストが設定されていない場合にはSEO効果も確実に高まるので、特にオススメの対策です。
ALTテキストとは？
ALTテキストは、正式には「alt属性」または「画像の代替テキスト」などと呼ばれれ、画像の内容を簡単に説明するためのテキストです。
ALTテキストの基本的な役割
ALTテキストの重要度を理解するためには、ALTテキストが果たしている本来の役割を知ることが必要です。ALTテキストは、今現在、大きく下記の2つの役割を担っています。
画像が表示されないときに、本来表示される画像の内容を示す
インターネット黎明期に通信回線の速度が遅かった時代には、接続状況で画像が表示されないことが多々ありましたが、そういった場合には画像が表示される位置にALTテキストが表示されていました。ブロードバンド化した近年では画像が表示されないことはほとんどありませんが、ALTテキストはこのように画像が表示されないときに、表示されるべき画像の内容を示す役割が与えられています。
（表示のされ方はブラウザで異なります）
視覚障がい者の方が使用する読み上げブラウザで正しい画像情報を伝える
視覚障がいをお持ちの方がインターネットを閲覧する際には、サイトに表示されている内容を音声で案内するブラウザの読み上げ機能が使用されます。読み上げ機能は通常、テキストのみが対象となるため画像については「画像」としか読み上げされません。
しかし、ALTテキストがあれば画像の内容をテキストで表示されていますので「画像 キャンペーンのバナー」のように画像の内容を読み上げてくれます。
ALTテキストが重要なワケ
ALTテキストが重要なのは、ALTテキストを追加することが「アクセシビリティ」の基本的な対応だからです。これは、あらゆる方がインターネットを利用できるようにするという前述の基本的な役割の2つ目に該当する内容ですが、SEO対策でもアクセシビリティへの考慮は影響しています。（Googleガイドラインでも明記されています。）
また、その他にもALTテキスト自体が検索エンジンのロボットにテキスト情報として認識されるため、重要なテキスト量が増え、直接的なSEO対策としても良い影響を得られます。
ALTテキストが入っているかをチェックするには？
ALTテキストが入っているかをチェックする方法として、Google Chromeブラウザの拡張機能「Web Developer」が便利です。
調査したいページを開き、Web Developerの「Images」の中の「Display ALL Attributes」をクリックすると、そのページの画像のALTテキストがすべて表示されます。
適切なALTテキストとは？
ALTテキストとして重要なのは、本来の役割の通り「画像の内容を示すこと」です。適切なALTテキストは前述のアクセシビリティの改善になりますので、それだけでもSEO対策でのマイナス評価を減らすことができます。
画像にテキストが入っている場合は、そのテキスト自体をALTテキストに設定する方法でOKです。
テキストのない画像の場合は、端的にその画像の内容を説明するテキストを作成して設定することをオススメします。（長くとも30文字以内がおすすめです）
こんな使い方はNG！
SEO対策を意識しすぎたテキストはペナルティの対象となる可能性があるため、おすすめしません。まずは欲張りすぎずに適切な内容だけ、設定してください。
本ページを読んでいただくと、そんなに難しい内容ではなく、まずは「ない」状態から「ある」状態になるだけでも改善効果が望めることを理解していただけたと思います。
ALTテキストテキストはウェブサイトのアクセシビリティ対応としては基本的な項目ですが、最初にも書きましたとおり納品時に設定されていないことが多々ありますので、ぜひ、ALTテキストをチェックしてみてくださいね。
この記事が参加している募集
気に入っていただけたらサポートをお願いします！未来の書籍化に向けて有益に活用させていただきます。