画像のalt属性について

【html初心者向け情報】
alt属性について考えさせられる機会があり、やっぱ大事だよねって思ったのでここにまとめます。
*ここで言うalt属性はimgタグで使われるalt属性を指します。

alt属性とは

alt属性は画像の代替テキストを指定する属性で、画像をテキストで説明する属性になります。
簡単にいうと画像の代わりとなる文のことです。

HTMLの標準仕様書となっているHTML Standardではalt属性について下記のような説明がされています。

the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.

訳: その目的は、すべての画像をそのalt属性のテキストに置き換えても、ページの意味が変わらないことです。

alt属性の必要性とアクセシビリティ

alt属性はどんな値を入れてもwebサイトの見た目は変わりません。
では何のためにあるのかというと、webページを訪れる人がどんな状況であれ、情報の差異を与えないためです。
例えば行きたいお店のwebサイトを訪れたとき、webサイトにお店の場所について書かれた地図の画像が掲載されていたとします。しかし何らかの理由で画像が表示されなかったとき、alt属性の値が空だと何も表示されません。それどころか画像を説明する代替テキストが何もないので、お店の場所の情報を得ることができません。
また、忘れられがちですがスクリーンリーダーなどのツールを使ってwebサイトを見ている人はalt属性の値が空だと画像の情報を得ることができません。
これではwebサイトを見ている人の状況によっては得られる情報に差異が生じてしまいます。

よって、alt属性は画像が表示されない場合や、スクリーンリーダーなどのツールを使ってwebサイトを見ている場合を含め、全てのユーザーに画像の内容を伝えられるようにするために代替テキストを記述します。

alt属性の考え方

ここまでalt属性は大事だよって話をしてきました。次に具体的にどう書いていけばいいのかを話したいと思います。
まず前提としてalt属性に絶対的な正解はありません。ただ、画像から読み取れる情報の過不足がないように注意しなければなりません。また、画像の代替テキストが画像の前後のテキストと情報を繰り返すことにならないようにも注意しましょう。

個人的にはalt属性を書くとき、挿入する画像を説明する文章を書き、その文章だけを読んで画像と同じ状況を頭の中でイメージできたらokというふうにしていました。今では人工知能のGeminiを使ってalt属性を考えてもらっています。もちろん手直しも必要ですが考える時間も減り、だいぶ楽になりました。
実際にGeminiの手を借りて下記のような画像があったときのalt属性を考えてみました。

<img src="/img/sakura.jpg" alt="背景の青空を埋め尽くすほどに満開に咲いた淡いピンク色の桜">

補足

企業ロゴやバナーなど画像自体にテキストが含まれている場合、alt="〇〇と書かれたロゴ"と書かれたロゴまでは記入する必要はなく、画像にしている文字だけをalt属性に設定します。

alt属性を空にする方が適切な時

項目名にもあるようにalt属性は空にする方が適切な時があります。
それは画像の説明がなくても情報に差異が生まれない、または情報を伝える必要がない時です。
例を二つほど挙げます。
まず一つ目に画像が装飾目的で使用されている場合です。例えば特に意味はないけど可愛くしたくてwebページの背景にハートを装飾した場合alt="ハート"、alt="ハートの装飾"とは書かず、空のままで大丈夫です。空っぽにすることで装飾のためという意味を表すことになります。
二つ目にバナーなど画像に日付やイベントなどの簡単な紹介が載っている場合です。その前後に続くテキストと代替テキストが同じである場合もalt属性の値は空にします。

補足

alt属性と似ていますがtitle属性というのがあります。title属性は補足的な情報を加えるための属性になります。どんな要素にも含めることができ、カーソルをホバーした時にコメントチップを表示してくれます。

話は変わりますが私は写真やイラストに題名がついている時にtitle属性を使う時がありますが、補足的な情報を加えるために使ったことはありません。というか使い道がわかりません。ここぞという使い所があれば教えてください。

春の訪れ