みなさん、img要素のalt属性を記述していますでしょうか?
最近のいろんな方のソースを見ると、alt属性が入っていないといったケースがよく見られ、それを見ると少しモヤモヤした気分になります。
そんなimg要素のalt属性について、使い方から必要なのかどうかまで詳しく解説していきます。
※2024年12月6日に記事内容を変更致しました。
alt属性とは
alt属性とは、設定された値が画像の代替テキストとなります。
画像が表示されない場合や、スクリーンリーダでの読み上げ機能、検索エンジンへの情報の伝達等に使用されますので、分かりやすく簡潔に記述する必要があります。
alt属性の記述の仕方について
次にalt属性の記述の仕方についての解説です。
以下のコードをご覧ください。
<img src="画像のURL" alt="代替テキスト">上記のように「alt=”代替テキスト”」と記述します。
※例では分かりやすいように、width属性やheight属性等は省略しています。
代替えテキストは、何を説明している画像なのか、リンクの場合はリンクである旨(●●に遷移します、など)、画像単体で分かる説明を記載します。また、スクリーンリーダの可読性を保持する為80文字以内を目安に記述するのが望ましいです。
alt属性は必要なのかどうか
次にalt属性は必要なのかという事ですが、結果から言うと必要です。
意味のある画像には、その内容が分かるようにalt属性に内容を記述しますが、装飾等の意味の無い画像にも必ずalt属性は必要です。
正しくない例
<img src="image.jpg" width="200" height="200">正しい例
<img src="image.jpg" width="200" height="200" alt="代替テキスト">
<!-- または -->
<img src="image.jpg" width="200" height="200" alt="">上記のようにalt属性は必ず必要となります。
「alt属性が空であること」と「alt属性が無い」場合は別の意味となり、W3Cでも公式にアナウンスされています。
alt属性が空の場合
alt属性が空(alt=””)の場合は、その画像が装飾や意味を持たない画像とみなされます。
スクリーンリーダでは読み上げをスキップされます。
alt属性が無い場合
alt属性が無い場合は、スクリーンリーダでは「説明が無い」という認識になり、画像名等を読み上げてしまうようです。
alt属性の詳しい役割
alt属性の詳しい役割としては以下のようなものがあります。
SEOへの影響
alt属性は、どういった画像なのかという事を検索エンジンに伝える事ができます。
昔ほど内容が評価されるという事でもないようですが、SEO評価以外でもalt属性は必要とされますので、内容はしっかりと記述するようにしてください。
また、Google等の画像検索の際にはalt属性に設定した内容が参照されるようです。
画像が表示されなかった場合のユーザーへの配慮
何かしらの理由で画像が表示されなかった場合、alt属性が設定されていると下の画像ようにalt属性に設定した内容が表示され、どういった情報なのか分かるようになります。
何も設定されていなければ、width属性やheight属性で指定した値の空間が空くだけとなり、画像に重要な情報があった場合、ユーザーはそれを得られなくなります。その為、代替テキストとして正しい情報を簡潔に分かりやすく設定する必要があります。
目の見えない方が読み上げ機能で情報を得られるようにするため
alt属性に設定した内容はスクリーンリーダ―(読み上げ機能)で読み上げられるので、アクセシビリティに対応するためには必要な情報です。
これは、デジタル庁のアクセシビリティガイドにも掲載されていて、必須項目となっています。
さいごに
いかがでしたでしょうか。
今回は、img要素にalt属性は必要なのかどうかと、正しい使い方について解説しました。
正しく使用する事で正確な情報を伝えられるようになりますので、手間はありますがきちんと設定するようにしてください。
