備忘録がてらメモ。
HTML上で画像の表示には主に [imgタグ] を使用するが、その画像の説明を追加する方法がいくつかある。
それぞれどのような場面で使用すべきかをまとめる。
alt属性
この [alt属性] には [画像が表示されない場合に何が表示されるべきか説明する文章] を設定する。
これは [alternative (代替) ] として定義されているもので、更に画像を認識できない人や状況のために、ページの読み上げツール等でも利用されている要素でもある。
例: [imgタグ] へ [alt属性] を設定
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/P/PlugOut/20231117/20231117002929.jpg" alt="コーヒーカップの画像" />
title属性
この [title属性] には [imgタグ] に限らず様々なタグで補足情報的なものを設定する。
元々は要素に対してマウスカーソルを載せている場合にその要素の補足情報を表示するためのものだったのだが、現在はタッチ操作などが増えた影響で意味が無い場合も多い状況となっている。
加えてページの読み上げツールを利用した場合には補足情報を適切に設定しないとユーザを混乱させてしまうことになる。
例えば先ほどの [alt属性] と併用した際に、同じような文章が両方に設定されていた場合にはユーザーにとって鬱陶しいこととなる。
或いは逆に [alt属性] と [title属性] のそれぞれで、矛盾した内容が設定されていた場合にはユーザーを混乱させるだけとなる。
そのような経緯から、現在ではあまり [title属性] を設定することは推奨されていないので注意。
例: [imgタグ] へ [title属性] を設定
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/P/PlugOut/20231117/20231117002929.jpg" title="まさにコーヒーカップである" />
figcaptionタグ
[figcaptionタグ] は、基本的に [figureタグ] タグと組み合わせて利用する。
対象は [imgタグ] だけでなく、主に図表となるものを [figureタグ] で囲い、その補足情報として[figcaptionタグ] を設定する。
またこの補足情報は [alt属性] や [title属性] と違ってデフォルト設定※ では図表と一緒に常に表示されるため、完全に要素が異なる。
※ もちろんCSSやJavaScript等によって表示制御を行う場合を除く
例: [imgタグ] を [figureタグ] で囲い [figcaptionタグ] を設定
<figure>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/P/PlugOut/20231117/20231117002929.jpg" />
<figcaption>よくあるコーヒーカップの例</figcaption>
</figure>
以上より画像についての情報を補足したいのであれば、以下が望ましいと思われる。
- 適切に [alt属性] を設定する
- 特別な意図がないのであれば [title属性] は設定しない
- 適切に [imgタグ] を [figureタグ] で囲い [figcaptionタグ] を設定する
