imgタグの後ろのaltの役割

画像を挿入する時は<img src="" alt="">が基本となるようです。

img・・・image(画像)の略。 src・・・source(情報源)の略。
その後ろに必要なのが alt。
alt="" は「代替テキスト」の役割をします。

画像や動画などのテキストでは無いコンテンツでも、テキストコンテンツと同じように情報を教えてくれます。
つまり画像や動画が読み込めなくても、どのような内容の画像なのかを理解することができるのです。
音声で聞く場合にも読んでくれます。

なので、「読み上げてもらわないと文脈が通じない」や「読み上げてもらうべき重要な写真」を挿入する場合に、簡潔で分かりやすい説明を入れる。という事でしょうか。


例えば、「風景写真」には情景が想像出来るような説明を入れるとか。
「社長の顔写真」には名前や会社名、肩書きを入れるとか。
「会社のバナー」には株式会社〇〇とか。

逆に読み上げを無視しても支障がない場合は、空白(alt=””)にします。


だって文章の頭に飾りで付けた写真や、文中に装飾的に入れたイラスト部分を一々”画像””画像”って読み上げられても、逆に「何の画像?気が散る」ってなる気がしませんか?

“alt"重要なのですね。
分かりやすい事例(代替テキストを付ける場合、つけない場合)のサイトもあるようなので、良かったら検索してみてください。

VisualStudioCodeで勉強を始めたのですが、どこかを弄ったのか2回目にして予測変換が出なくなりました・・・。
なので通常なら<a href="~" って打ったら自動で alt="" ってなるのが出ないんです。
なので答え合わせした時に「alt?何だそれ」となりまして、調べた次第です。


まだまだ超初心者なので「ここ違うよ」とかあるかも知れませんが、分からなくて調べた事を少しずつ、自分なりに噛み砕いて理解した事を共有出来ればと思っています。