StudyOfImgTag - ぺったんR Wiki - ぺったんR

<img>タグの研究 と ぺったんR での活用

ぺったんR は <img> タグを大量に使うサービスです．<img> タグを正しく理解し、よりよい情報伝達を目指します．

主に alt, title 属性にまつわる ユーザビリティ について

• alt 属性
  • html 4 で必須．画像を表示できない場合に代わりに表示するテキスト．
• title 属性
  • img 固有の属性でなくいろんなタグに設定できる．

http://w3g.jp/xhtml/dic/title

title属性は、ある要素に対して補足情報を付け足す属性です。多くの視覚環境の UA が title属性を指定した要素にポインティングデバイス(マウスやノートパソコン付属のトラックパッドなど)のカーソル（ポインタ）を合わせることで Tooltip（ツールチップ）をヘルプとして表示します。また、音声出力環境（スクリーンリーダー、音声ブラウザなど）の UA では指定された内容を補足情報として読み上げることが可能です

アクセシビリティに配慮するため非視覚環境において再現（表現）しにくい要素には、積極的に title属性を使って補足情報をつけることが望まれます

img タグにまつわる SEO について

ある 画像に対して、ページによっていろいろな alt が設定された場合、ペナルティとかはないよね？ 例

<img src="1.png" alt="ペン次郎">
<img src="1.png" alt="ペンギン風の男">

• alt
• title