くまだどうも、くまだです。
今さらという気もしますが、alt属性の書き方について。
visually-hiddenのCSSについてはこちら。
alt属性とは
alt属性は、ブラウザで画像が表示できないときに、画像の代わりに表示されるテキストを指定するための属性です。
alt属性に書いたテキストは、スクリーンリーダーでの読み上げ時に代替テキストとして読み上げされるようになります。書き方は以下の通りです。
<img src="画像のパス" alt="代替テキスト">検索エンジンのクローラー向けに画像に対してalt属性を書いたほうがいいということがあります（SEO的に直接の影響はないが、書いたほうがいいとされている）。
alt属性の値は全部書いたほうがいい、という意見もありますが、必ずしも全てにalt属性の値を書く必要がない場合があります。
alt属性の値を書かないほうがいいケース
alt属性の値を空の状態にしたほうがいいケースとしては、
- 装飾的な画像
- テキストで画像の情報を伝えていて、alt属性での説明が冗長になる画像
装飾的な画像は、装飾目的のための画像なので、その画像自体がなくてもコンテンツやテキストの意味を伝えることができる場合は、alt属性は空でもよさそうです。
<img src="images/icon.png" alt="">alt属性の値を空の状態にすると、読み上げ時はそのalt属性はスキップされます（読み上げされない）。
なお、alt属性自体を書かない場合、ファイル名が読み上げられてしまうのでalt属性の記述は省略しないほうがいいです。
<img src="画像のパス"> <!-- ファイル名が読み上げられる-->alt属性の値を書いたほうがいいケース
alt属性の値を書いたほうがいい場合は、例えば、
- テキストが画像化されている
- 写真やイラスト画像で、コンテンツ上重要な情報である場合
テキストが画像化されているものは、例えばロゴ画像があります。その場合alt属性には、画像の中の文字と同等の内容を入れます。なので、alt属性に「ロゴ」みたいなのは画像と内容が異なるのでそれはNGです。
<!-- OK -->
<img src="images/logo.png" alt="株式会社○○">
<!-- NG -->
<img src="images/logo.png" alt="ロゴ">写真やイラストの場合、その情報がコンテンツを理解する上で重要な情報の場合、その内容をalt属性にいれる必要があります。（その写真や画像がないとテキストやコンテンツが成り立たない場合はalt属性に代替テキストを入れる）
まとめ
代替テキストになにをいれるべきか迷ったら、その代替テキストが本文といっしょに読み上げられたとき意味が通じるかどうかで判断します。
- alt属性は必須で指定する
- alt属性はスクリーンリーダーでの読み上げ時に代替テキストとして読み上げされる
- alt属性の値が「空」だと、読み上げ時スキップされる
ここまで読んでくださりありがとうございました。