画像にalt属性が指定されていませんとは？alt属性の記述方法も詳しく解説
エラーメッセージ「画像にalt属性が指定されていません」とは
「画像にalt属性が指定されていません」というエラーメッセージには、どのような意味があるのでしょうか。
はじめに、「画像にalt属性が指定されていません」とはどういったエラーなのかについて解説します。
「画像にalt属性が指定されていません」の意味
「画像にalt属性が指定されていません」とは、投稿しようとしている画像にalt属性が設定されていないことを示すエラーメッセージです。
このエラーメッセージが表示された場合、画面の情報を音声で読み上げる機能であるスクリーンリーダーが利用できないケースがあります。
スクリーンリーダーは目の不自由な方への補助機能として活用されることが多いため、利用できない場合は正確な情報を伝えられない可能性があり、アクセシビリティの低下を招いてしまいます。
alt属性とは
alt属性（オルト属性）とは画像の代替テキストのことを指し、HTMLのimgタグ内に記述します。
alt属性で設定した内容は、画像が読み込めない際にテキストで表示されたり、スクリーンリーダーで読み上げられたりする際に使用されます。
また、検索エンジンが画像の内容を認識する際にも使用されるため、検索エンジンにとってもユーザーにとっても重要であるといえます。
「画像にalt属性が指定されていません」の原因と対処法
「画像にalt属性が指定されていません」は、画像にalt属性が設定されていないことを指していることから、エラーの原因は画像の代替テキストを記述していないことにあると考える方も多いかもしれません。
しかし、原因はそれだけではありません。
ここでは、「画像にalt属性が指定されていません」が表示される主な原因と対処法をご紹介します。
【alt属性が設定されていない】imgタグ内に記述する
imgタグが、以下のようになっているケースではalt属性が設定されていないことになるため、「画像にalt属性が指定されていません」というエラーメッセージが表示されている可能性があります。
【alt属性が設定されていない】
<img src="example.jpg">
これらに対しては、alt属性を設定することでエラーが解消されます。
後述する方法を参考に、alt属性を設定しましょう。
【画像が正常にアップロードされていない】原因を解消する
画像が何らかの原因で正常にアップロードされていないケースでも、「画像にalt属性が指定されていません」が表示されることがあります。
この場合は、画像がアップロードされなかった原因を解消し、正常にアップロードすることで解決する可能性が高まります。
画像が正常にアップロードされないときに考えられる原因は以下のとおりです。
- ファイルサイズが制限を超えている
- メモリが制限を超えている
- 画像のファイル形式が未対応のものになっている
- 画像をアップロードする権限が付与されていない
- WordPressの場合：使用しているテーマやプラグインの影響を受けている
これらのいずれかに当てはまる場合は、原因を解消し再度画像をアップロードしましょう。
【対象の画像が削除されている】再度アップロードする
「画像にalt属性が指定されていません」が表示された画像がライブラリから削除されている場合も、このエラーメッセージが表示されます。
こうしたケースの場合は、対象の画像を再度アップロードして設定をし直すことで解消される可能性があります。
画像のalt属性を設定する方法
「画像にalt属性が指定されていません」を解消するためには、正しくalt属性を設定する必要があります。
そもそもalt属性が設定されていなかったり、設定されていても内容が記述されていなかったりすると、エラーが出る原因になってしまいます。
「画像にalt属性が指定されていません」を発生させないためにも、正しい設定方法を理解しておきましょう。
HTMLで設定する方法
HTMLの場合、直接記述することでalt属性を設定できます。
記述方法は以下のとおりです。
<img src="example.jpg" alt="画像の説明">
WordPressで設定する方法
WordPressの場合、HTMLのようにタグを記述しなくても設定することができます。
WordPressでalt属性を設定する方法は以下のとおりです。
- ❶WordPressにログインし、左側のメニューバーから「メディア」を選択する
❷「メディアライブラリ」を選択し、alt属性を設定する画像をクリックする
❸「Altテキスト（代替テキスト）」のテキストボックスに画像の説明を入力する
alt属性の効果的な記述方法
alt属性は、HTMLやWordPressのどちらを利用するケースにも当てはまるポイントがあります。
alt属性にどのようなテキストを記述するかは検索エンジンにとってもユーザーにとっても重要です。
ここでは、alt属性を設定する際に効果的な記述方法と、避けるべき記述方法をそれぞれ以下の画像を例に解説します。
効果的な記述方法
Googleは、alt属性について以下のように述べていることから、画像の内容を正確にわかりやすく記述することが重要であるといえます。
代替テキストを設定するときは、適切にキーワードを使用して、ページのコンテンツの内容に沿った、情報に富む、役に立つものになるようにします。
引用：わかりやすいファイル名、タイトル、代替テキストを使用する｜Google 検索セントラル | ドキュメント
上記の画像のalt属性を設定する際に効果的であると考えられる記述方法は以下のとおりです。
<img src="apple.jpg" alt="かごの上にある3つの赤いりんご">
<img src="apple.jpg" alt="3つの赤いりんご">
避けるべき記述方法
Googleは、先述の「わかりやすいファイル名、タイトル、代替テキストを使用する」内にて、キーワードの乱用はスパムと認識される可能性があることから避けるようにと述べています。
そのため、以下のような記述方法は避けるべきといえるでしょう。
<img src="apple.jpg" alt="赤いりんご リンゴ 林檎 赤リンゴ 赤りんご 赤林檎おいしそう 熟したりんご">
<img src="apple.jpg" alt="果物 フルーツ りんご リンゴ 林檎 apple 葉">
<img src="apple.jpg" alt="赤い林檎の画像 3つの赤いリンゴの画像 りんごの画像">
alt属性は画像の内容を伝えるものであることから、「〇〇の画像」といった表記は不要です。
alt属性を最適化する方法
ここまで、alt属性の設定方法や記述方法についてお伝えしました。
画像の情報を正確にわかりやすく記述することは最重要ですが、それを踏まえたうえでalt属性を最適化する方法があります。
装飾画像の場合はalt属性を空白で設定する
alt属性は、マーカーや背景といった装飾のために使用されている画像の場合、Webサイトの内容に直接関与するものではないことから、alt属性を記述しなくともよいものとされています。
これは、障がいを持つ人々がデジタルテクノロジーをより利用しやすくするために定められたW3ガイドライン内の「画像チュートリアル」に記載されており、Googleも奨励しているものです。
この場合は、「画像にalt属性が指定されていません」のエラーが出ることはないとされています。
記述方法は以下のとおりです。
<img src="linemarker.jpg" alt="">
「alt=""」の「""」内を記述しない方法が正しい表記で、「alt=""」を記述しないのは誤表記となってしまうことには注意しましょう。
WordPressの場合は、「Altテキスト（代替テキスト）」を空白にしておくことで自動的に「alt=""」が付与されるため、別途設定する必要はありません。
画像検索最適化のためにはalt属性が重要
Googleは、「画像の SEO ベスト プラクティス 」内で「標準の HTML 画像要素を使用すると、クローラーが画像を検出して処理しやすくなります」と述べており、alt属性を正しく記述することが画像検索最適化において重要であることがわかるでしょう。
ただしCSSで指定された画像はインデックス登録されないため、Googleがあげている以下の例を参考に記述することをおすすめします。
よい例
<img src="puppy.jpg" alt="ゴールデン レトリーバーの子犬" />
悪い例（style属性はCSSを指定する役割があるため）
<div style="background-image:url(puppy.jpg)">ゴールデン レトリーバーの子犬</div>
画像リンクでのalt属性はアンカーテキスト代わりになる
画像に対してリンクを設置している画像リンクの場合、alt属性はアンカーテキストの代わりにもなります。
アンカーテキストとは、Webサイト内に設置するリンクつきのテキストのことです。
例えば以下の画像の赤枠部分は、バナー画像にトップページへのリンクが設置してあります。
これにalt属性を設定する場合の正しい記述例と誤った記述例は以下のようになります。
正しい記述例
<img src="banner.jpg" alt="バンソウのトップページ">」
誤った記述例
<img src="banner.jpg" alt="バンソウのバナー画像">」
alt属性を確認する方法
ここまで、alt属性の効果的な記述方法や最適化する方法についてお伝えしました。
では、すでにアップロードしている画像のalt属性を確認するにはどうすればよいのでしょうか。
最後に、alt属性を確認する方法を2つご紹介します。
Googleのデベロッパーツールでの確認方法
Google Chromeには、デベロッパーツールと呼ばれる検証機能があります。
この機能を使用すると、ソースコードが表示されるためalt属性も確認ができます。
デベロッパーツールの使用方法とalt属性の確認方法は以下のとおりです。
- ❶alt属性を確認したい画像があるWebページを開き、右クリックし「検証」を選択する
❷「Ctrl＋F」を同時に押して検索窓を出すか、中段の検索窓に直接「alt」と入力する
❸該当箇所を見つけ、alt属性を確認す
Google拡張機能での確認方法
Googleの拡張機能のひとつである「Alt & Meta viewer」を使用することでもalt属性が確認できます。
拡張機能を追加したら、ブラウザの右上に表示される「Alt」というアイコンをクリックしてAlt & Meta viewerを立ち上げ、「画像のAlt表示」をクリックすると、画像のalt属性がポップアップで表示されるようになっています。
デベロッパーツールを使用するよりも手軽なため、HTMLタグを見慣れていない方にもおすすめです。
まとめ
この記事では、「画像にalt属性が指定されていません」というエラーについて解説しました。
「画像にalt属性が指定されていません」というエラーが表示された場合、考えられる原因としてはimgタグ内にalt属性が正しく設定されていないことや、何らかの要因で画像が正常にアップロードされていないこと、ライブラリから画像が削除されていることなどがあげられます。
alt属性を正しく設定したり、画像を再度アップロードしたりすることで解消する可能性があるため、原因を特定したらそれぞれにあった対処法をお試しください。
alt属性は、HTMLの場合は直接記述し、WordPressの場合は「メディア」メニューから該当する画像を選択して記述することで設定できます。
alt属性を効果的に記述するには画像の情報を正確にわかりやすく伝える必要があります。
キーワードの詰め込み過ぎは、Googleからスパムと見なされる可能性があるため、避けるべきだといえます。
正しく設定をし、「画像にalt属性が指定されていません」というエラーを表示させないようにしましょう。
