みなさん、img要素のalt属性を記述していますでしょうか?
最近のいろんな方のソースを見ると、alt属性が入っていないといったケースがよく見られ、それを見ると少しモヤモヤした気分になります。
そんなimg要素のalt属性について、使い方から必要なのかどうかまで詳しく解説していきます。
alt属性とは
alt属性とは、設定された値が画像の代替テキストとなります。
ユーザーが画像を表示しない設定にしている、回線の影響で画像を読み込めないなど、何かしらの理由で画像が読み込めなかった場合などに、設定されたテキストが表示されます。その為、どんな画像なのかユーザー側にも分かるように設定する必要があります。
また、alt属性に設定する事で、スクリーンリーダー(読み上げ機能)にも対応可能です。
alt属性の記述の仕方について
ここではalt属性の記述の仕方についての解説です。
以下のコードをご覧ください。
<img src="画像のURL" alt="代替テキスト">
上記のように「alt=”代替テキスト”」と記述します。
あまり長くなり過ぎないように、簡潔に分かりやすく記述してください。
※例では分かりやすいように、width属性やheight属性等は省略しております。
alt属性は必要なのかどうか
次にalt属性は必要なのか、という事ですが、結果から言うと個人的には必要と考えています。
それは、以下のような理由からです。
SEOへの影響
alt属性は、どういった画像なのかという事を検索エンジンに伝える事ができます。
ただ、alt属性が記述されていなくても、SEO評価が下がるという事はあまり無いようです。また、昔ほど評価されるという事でもないようですが、設定しておけばSEO評価がされる可能性もありますので、設定しておいて損はありません。
また、Google等の画像検索の際にはalt属性に設定した内容が参照されるようです。
画像が表示されなかった場合のユーザーへの配慮
何かしらの理由で画像が表示されなかった場合、alt属性が設定されていると下の画像ようにalt属性に設定した内容が表示され、どういった情報なのかユーザーにも分かるようになっています。
何も設定されていなければ、width属性やheight属性で指定した値の空間が空くだけとなり、画像に重要な情報があった場合、ユーザーはそれを得られなくなります。
その為、代替テキストとして正しい情報を簡潔に分かりやすく設定する必要があります。
目の見えない方が読み上げ機能で情報を得られるようにするため
alt属性に設定した内容はスクリーンリーダ―(読み上げ機能)で読み上げられるので、アクセシビリティに対応するためには必要な情報です。
これは、デジタル庁のアクセシビリティガイドにも掲載されていて、必須項目となっているようです。
alt属性を設定しない方がいい場合
先ほどalt属性は必要だと言いましたが、必要としない場合もあります。
アイコンや枠などの装飾の画像についてはalt属性を記述しないか、alt属性の中身を空にする事も可能です。
ただし、そういったコンテンツの内容として意味が無い部分に関しては、極力CSSで背景や疑似要素として配置する事が望ましいかと思います。
さいごに
いかがでしたでしょうか。
今回は、img要素にalt属性は必要なのかどうかと、正しい使い方について解説しました。
正しく使用する事で正確な情報を伝えられるようになりますので、手間はありますがきちんと設定するようにしてください。