法人向けクラウドサービス・SaaS・IT製品の比較・資料請求サイト

画像に代替テキスト(alt属性)は追加すべき?必要性と書き方を解説します

2022年11月2日
画像に代替テキスト(alt属性)は追加すべき?必要性と書き方を解説します

代替テキストは、画像の読み上げソフトであるスクリーンリーダーを使用するユーザーをはじめ、低帯域幅ネットワークを使用しているユーザーといった、webページの画像を確認することのできないユーザーのための補助機能として役に立っています。画像の内容をテキストで説明するための設定にはalt属性を使うことから、「alt属性」や「altテキスト」と呼ぶ人もいます。今回は、そんな代替テキストを書く際に注意すべきことについて、良い例と悪い例を交えて解説していきます。

目次

閉じる

今回は、代替テキストを書く際に注意すべきことについて、良い例と悪い例を交えて解説していきます。

代替テキスト(alt属性)とは

代替テキスト(alt属性)とは

代替テキストとは、Webサイトに掲載されている画像や動画が表示されないときに表示されるテキストのことです。

コンテンツを音声に変換する「スクリーンリーダー」などを使ったときにも、代替テキストが読み上げられます。

代替テキストの用途
ブラウザ:画像や動画が表示されない場合、代替テキストが表示される
テキストブラウザ:代替テキストが表示される
スクリーンリーダー:代替テキストが読み上げられる
点字ディスプレイ:代替テキストが点字に変換されて表示される
クローラー:代替テキストで画像や動画の内容を理解する

代替テキスト(alt属性)を設定するメリット

代替テキスト(alt属性)を設定するメリット

では代替テキスト(alt属性)を設定するメリットをご紹介します。

アクセシビリティの向上に寄与する

視覚障碍者の方をはじめ、たくさんの人がインターネット上のコンテンツを利用するため、スクリーンリーダーを使っています。

スクリーンリーダーとは、画像を含む画面上にあるコンテンツを音声に変換し、操作できるというソフトです。代替テキストが無い場合、画像の内容をユーザーに伝える手ことができず、スクリーンリーダーとしての役割を果たせません。基本的には代替テキストの無い画像はスキップされますが、画像ファイル名を読み上げてしまうといった場合もあるのです。

Google検索セントラルでこのように記載もあります。

代替テキスト(画像について説明するテキスト)は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。

引用:Google 画像検索に関するおすすめの方法

「コンテンツの関連性」 を向上させる

検索エンジンは、ページ上に存在する単語を認識し、そのページがどういったコンテンツかを理解します。

例えば、そのページで「トイプードル」「フレンチブルドッグ」「ゴールデンレトリーバー」について言及されている場合、それらが犬の種類であることを理解できるのです。しっかりと代替テキストを記載することは、検索エンジンやユーザーはこれらの画像を認識することにつながり、ひいてはページとそのコンテンツに関して理解を深めることにもなるのです。

画像リンクのアンカーテキストとしても機能する

アンカーテキストとは、ウェブページから別のウェブページにリンクする、クリックが可能なテキストのことを指します。

画像をリンクにした場合、alt属性がアンカーリンクテキストとして扱われます。検索エンジンがページの内容を理解するためには、こういったアンカーテキストのような情報も必要であり、SEOにも大きな影響を与えます。

代替テキスト(alt属性)の設定方法

代替テキスト(alt属性)の設定方法

工程としては、HTMLのタグにalt属性を追加するだけです。

例えば、トイプードルの画像があった場合、<img src=”example.png” alt=”トイプードル”>といった具合になります。

以下では、WordPressで画像に代替テキストを設定する方法をご紹介します。

  1. 「メディアを追加」から、記事に挿入する画像を選択する
  2. 画面右上に表示される「代替テキスト」の項目に、代替テキストを記述する
  3. 「投稿に挿入」をクリックすれば、代替テキストが設定された画像を記事に挿入する

これで代替テキスト(alt属性)を行うことができました。

代替テキスト(alt属性)を設定するときの注意点

代替テキスト(alt属性)を設定するときの注意点

代替テキスト(alt属性)を設定するとコンテンツの関連性が向上します。しかし、代替テキスト(alt属性)を設定する上でいくつか注意しなければならないことがあります。

画像について正確に記述する

画像について、なるべく正確に記述することが大切です。

例えば犬の画像の場合、「走っている」犬なのか、「餌を食べている」犬なのかなど、どういう状態の「犬」なのかを記述することが大切です。

簡潔に記述する

代替テキストは、なるべく簡潔に記述するようにします。

スクリーンリーダーを使用している場合、長い代替テキストはむしろ理解の妨げとなってしまうので、注意が必要です。

キーワードは詰め込まない

「犬・トイプードル・プードル」など、関連キーワードを羅列するのは適切ではありません。

ユーザーエクスペリエンスが低下するだけでなく、スパム行為と認識される場合があります。

画像であるということを記載しない

代替テキストの中に、「~の画像」を含める必要はありません。

代替テキスト(alt属性)の良い例・悪い例

代替テキスト(alt属性)の良い例・悪い例

では実際に代替テキスト(alt属性)の良い例と悪い例をご紹介します。

こちらのトイプードルの画像に代替テキスト(alt属性)を設定する場合、どのように設定するのが正解なのでしょうか。

代替テキスト(alt属性)の良い例

画像の内容に沿った代替テキストを設定するのが、良い例です。

  • 良い例:適切な説明をしている…<img src=”example.png” alt=”トイプードル”>
  • 最も良い例::わかりやすく簡潔な表現で説明している…<img src=”example.png” alt=”寝ているトイプードル”/>

代替テキスト(alt属性)の悪い例

何か意味をもつ画像に対して、画像の内容に沿っていなかったりそもそも代替テキストが設定されていなかったりするのが悪い例です。

  • 悪い例:代替テキストが無い… <img src=”example.png”/>
  • 悪い例:キーワードを乱用している… <img src=”example.png” alt=”犬 子犬 トイプードル かわいい トレーニング トイレ プードル 小さい”/>
  • 悪い例:画像と異なる内容の代替テキストを設定している…<img src=”example.png” alt=”人気の猫種”/>

画像すべてに代替テキスト(alt属性)を追加すべき?

画像すべてに代替テキスト(alt属性)を追加すべき?

代替テキストを設定するべきと説明してきましたが、画像すべてに代替テキストを追加すればいいというわけではありません。

ページ内にある画像がただの装飾を目的として存在している場合や、画像の前後にあるテキスト情報以上に重要な情報が画像に含まれていない場合は、無理に代替テキストを追加する必要はないのです。そのような余計な代替テキストは、SEOにも寄与しないだけでなく、スクリーンリーダーを使用しているユーザーにとっては邪魔になってしまいます。

画像に代替テキストが必要ない場合は、<img src=”example.png” alt=””>というように、alt属性に内容を記載しないことが効果的です。

スクリーンリーダーの中には、alt属性に内容が記載されていない場合、画像のファイル名を読み取ってしまうものも存在しますが、基本的には、alt属性の内容が空の画像のファイル名は無視されるようになっています。

まとめ

代替テキストの必要性や書き方

今回は、代替テキストの必要性や書き方について解説してきました。

アクセシビリティの向上やコンテンツの関連性をしっかりと認識してもらうためにも、正確に記載する・簡潔に記載する・詰め込まないといった代替テキストを記載する際の注意点を意識して適切な代替テキストを用意することが大切です。

投稿者プロフィール

山田 拓海
山田 拓海
学生の頃、フリーランスWebライターとして独立。その後、Webメディアの運営やM&Aによる売却を行う。現在、Webディレクターやマーケターとしても活動中。

マーケティングに関連するサービス

Flipdesk

Flipdesk

レビューはまだありません
顧客体験(CX)の向上で、売上・広告効果を最大化

サービスの特長

  • ユーザーに合わせた接客自動化でCX向上を加速
  • 業界随一の圧倒的なコスパ
  • 導入〜レポーティングまで、充実したサポート体制を提供

tami-co(たみこ)

tami-co(たみこ)

レビューはまだありません
seo・コンテンツマーケティング用記事の作成ツール

サービスの特長

  • 上位表示される記事の構成案が作成できる
  • 既存記事のリライト機能
  • 充実の導入サポート体制によるご支援

APP.ASO

APP.ASO

全体評価
3.7
レビュー
2件
アプリストアで「見つからなかった」を見つけてもらえるASOサービス

サービスの特長

  • 自社独自開発のAIツール
  • 独自のノウハウによるキーワード選定
  • マーケターが選ぶ信頼できるASO会社No.1
0 社の資料を選択中
無料資料請求へ進む