alt（オルト）とは？alt属性を設定するメリットや書き方・設定方法・確認方法を解説

視覚に障害のある方の中には、スクリーンリーダー（画面読み上げソフト）を使ってWebサイトを閲覧する方もいます。スクリーンリーダーは画面上の文章などを音声で読み上げますが、画像に適切な説明がない場合、画像から伝えたい情報を十分に把握できないことがあります。

alt属性に代替テキストを設定しておけば、スクリーンリーダーがその文章を読み上げるため、画像を直接見なくても情報を得られます。画像を使って説明している内容も音声で確認できるようになり、Webサイトのアクセシビリティ向上につながります。

alt属性を設定すると、検索エンジンが画像の内容を理解するための手がかりになります。Googleは画像認識技術に加え、alt属性や画像周辺の文章なども利用して、画像の内容を判断しています。画像の内容を検索エンジンに伝えるためには、次のような方法があります。

なかでも、alt属性は画像の内容を文字で伝えるための基本的な手段です。適切に設定することで、検索エンジンが画像と検索語句の関連性を理解しやすくなり、Google画像検索からの流入につながる可能性もあります。

alt属性を設定すると、通信環境やファイルの不具合で画像が表示されない場合にも、画像の内容を文字で伝えられます。画像の読み込みに失敗したとき、ブラウザによっては画像の代わりにalt属性の代替テキストが表示されます。商品写真が表示されなくても、代替テキストがあれば、何の商品を紹介しているのかを把握しやすくなります。画像を閲覧できない状況でも必要な情報を補えるため、ページの理解を助けます。

画像を使ったリンクでは、alt属性のテキストがアンカーテキストの役割を果たします。アンカーテキストとは、リンク先の内容や目的を伝える文字のことです。画像だけでリンクを作る場合、alt属性によって読み上げ機能の利用者や検索エンジンにリンク先の情報を伝えられます。同じリンク内の文字ですでにリンク先を十分に説明している場合は、重複を避けるため、画像のalt属性を空にすることもあります。

alt属性は、<body>～</body>に設置するimg要素内へ、下記のように記述します。

下記の「alt=”画像の説明”」部分がalt属性です。

<img src="画像のURL" alt="画像の説明">

基本的にalt属性のテキストは、画像表示に不具合が生じない限り、ユーザーの目に触れることがありません。しかし、検索エンジンからはページを評価する対象として判断されるため、テキストの記述は適切であるよう心がけましょう。

WordPressでは、メディアライブラリと記事の編集画面からalt属性を設定できます。メディアライブラリでは「メディア」→「ライブラリ」で画像を選び、「添付ファイルの詳細」の「代替テキスト」欄に入力します。変更内容は自動保存されます。

ブロックエディタでは画像ブロックを選択し、右側の設定パネルの「代替テキスト」欄に入力してください。公開済みの記事でも、該当する画像ブロックの代替テキストを修正し、記事を更新できます。

alt属性には、画像が伝えている情報を具体的に記述しましょう。「商品画像」「グラフ」などの言葉だけでは、何が写っているのか、どのような情報を示しているのかが分かりません。画像を見られない人が代替テキストを読んだときに、内容を理解できるかが判断の基準です。説明する際は、画像に写っているものだけでなく、ページ内でその画像が果たす役割も考慮します。

なお、画像の種類自体に意味がある場合を除き、「～の画像」「～の写真」といった言葉を付ける必要はありません。説明に必要な情報を選び、簡潔に伝えましょう。

（出典：Google検索セントラル「画像のSEOベストプラクティス」）

alt属性は、画像の内容が伝わるように、必要な情報を簡潔に記述しましょう。文字数は125字以内、できれば50～80字程度を目安にするとよいでしょう。ただし、Googleは具体的な文字数の上限や目安は示していません。画像の内容に沿った、情報量が豊富で役立つ説明を推奨しており、短すぎる説明では画像の内容が十分に伝わらず、反対に不要な情報を詰め込むと読みにくくなります。

Googleは、子犬の画像を例に、次のような代替テキストを紹介しています。

このように、単に「子犬」と書くよりも、犬種や動作を具体的に説明した方が画像の内容を伝えられます。また、SEOを意識してキーワードを不自然に繰り返す行為も避けましょう。文字数を基準にするのではなく、画像が伝える情報を過不足なく説明できているかを確認することが大切です。

（出典：Google検索セントラル「画像のSEOベストプラクティス」）

alt属性には、画像の前後にある文章と同じ説明を繰り返さないようにしましょう。スクリーンリーダーを使っている場合、本文と代替テキストで同じ情報が続けて読み上げられると、内容を把握しにくくなることがあります。

画像の説明を書く前に、見出しや本文、キャプションですでに伝えている情報を確認してください。代替テキストには、文章だけでは分からない画像の情報を補う役割があります。画像の内容が周囲の文章で十分に説明され、追加で伝える情報がない場合は、alt属性を空にする方法もあります。

背景の模様や区切り線など、装飾目的で使用する画像には、代替テキストを記述する必要はありません。画像自体に情報がなく、削除してもページの内容が伝わる場合は、alt属性を空に設定します。

この場合、alt属性そのものを省略するのではなく、「alt=””」と記述することが重要です。alt属性を空にすることで、スクリーンリーダーが装飾画像を読み飛ばし、不要な情報が読み上げられるのを防げます。一方、見た目は装飾的でも、情報を伝える役割がある画像には、適切な代替テキストを設定しましょう。

alt属性に、検索順位を上げる目的でキーワードを大量に詰め込むことは避けましょう。Googleは、画像の代替テキストにキーワードを不自然に羅列する行為について、ユーザーの利便性を損ない、スパムとみなされる要因になる場合があると説明しています。

alt属性は、キーワードをできるだけ多く含めるためのものではなく、画像の内容を伝えるためのものです。無関係な語句や類似したキーワードを繰り返すと、スクリーンリーダーで読み上げられた際にも内容が分かりにくくなります。キーワードの個数を基準にするのではなく、画像の内容を自然な文章で説明できているかを確認しましょう。

（出典：Google検索セントラル「画像のSEOベストプラクティス」）

スクリーンリーダーを利用する方は、alt属性の代替テキストを通じて画像の情報を把握します。そのため、実際の画像と説明が食い違っていると、誤った情報を伝えてしまいます。例えば、犬の写真に「猫が遊んでいる様子」と記述すると、画像を見る人と読み上げを聞く人で、受け取る情報が異なります。検索エンジンもalt属性を画像の内容を理解する手がかりにするため、画像に写っていないものや、関係のないキーワードを追加しないようにしましょう。

スクリーンリーダーは、Webページの本文だけでなく、画像に設定された代替テキストも読み上げます。本文の文章をそのままalt属性に貼り付けると、同じ内容が繰り返し読み上げられ、情報を把握するまでに余計な時間がかかります。特に、画像の前後に長い説明文がある場合、その文章を丸ごと代替テキストに設定すると、読み上げの負担が大きくなります。本文ですでに説明している内容を確認し、画像から補足する必要がある情報だけを簡潔に記述しましょう。

Google Chromeでは、ページのソースコードやデベロッパーツールを使ってalt属性を確認できます。主な手順は次の通りです。

※ショートカットキーはWindowsの場合です。Macでは操作が異なります。

Chromeのウェブストアから、無料で利用できる拡張機能の「Alt & Meta viewer」を追加しましょう。ブラウザの右上に表示されている拡張機能の一覧から、「Alt」を選択し「画像のAlt表示」右のツールチップマークをクリックするだけです。後は、そのページ内にあるすべての画像に、どのようなalt属性が記述されているかがツールチップで表示されます。