代替テキスト

【HTML】画像を貼るとき

[img 要素]
img要素には、何らかの事情で画像が表示できない状況を想定して代替テキストを指定する必要がある。

テキストブラウザで閲覧している場合や画像を読み込まないように設定している場合。
音声読み上げブラウザを利用している場合
画像のリンク切れの場合など
etc...


img 要素では、代替テキストは alt属性で指定する。

alt属性は、画像が表示されない場合の代わりとなるテキストを指定するためのものなので、ファイル名を書いたり、飾りのための文章を記述するのは不適切。
特に、IEでは画像マウスオンするとaltに指定した文字がツールチップとして表示されるので飾りとして使用しないようにする。（←これは特に気をつける）
（これはIEの挙動であり、他のブラウザでは同じ挙動をするとは限らない）
alt属性は飾りではない。
あくまでアクセシビリティのための指定にするべき(｀・ω・)ノ


アイコンやスペーサー画像などのように、代替テキストを無理に指定する必要のないものもある。
その場合でもalt属性を書かないのではなく、alt="" のように記述しておくと良い。


画像の説明は、alt属性ではなくtitle属性で指定する。
title属性の内容をツールチップとして表示するブラウザは多い(｀・ω・)ノ
alt属性がツールチップ表示されるIEでも、title属性が指定されている場合は、alt属性に優先してツールチップ表示されるのだ。

＊＊例＊＊
注：わざと画像のリンクを切ってます。
　IEでは画像部分に×印が表示される。
　Firefoxではalt属性がテキストとして違和感なく表示されるが、画像があったとは分かり辛い。

＋マウスオンで違いが出る（ハズ）＋

其の一（altだけ指定）

　画像→　

其の二（altとtitleを指定）

　画像→　



HTMLだってCSSだってまだ全然覚えられないあたしは、アクセシビリティに配慮したサイトを作るには程遠いけど・・・。
それでも今からきちんと。
alt属性とtitle属性を両方記述する習慣を身に付けたい(・ω・｀)