alt属性の正しい書き方について書いてあるサイトを検索していたらSEOに関する記事ばっかりで萎えたので書いておく。
alt属性の意味
HTML5でのaltはスクリーンリーダーやロボット等、画像を見る事ができないユーザーに対しても適切な情報を伝えるためのフォールバック。
alt属性には「その画像が表している”文脈”」を書く
例としてたまたまTLに流れてきた画像を拝借します。
おいしそうですね。
via (8) Twitter
例文
ある晩、私はimg要素のalt要素について正しい説明をしているサイトを探していた。
ところがなかなか見つからないのに業を煮やし、仕方が無いので自らQiitaに記事を書くことにしたのだった。
記事を書くためには画像が必要である。私はおもむろにTwitterのURLを叩き、タイムラインを表示する。やあ、おあつらえ向きな画像があるじゃないか。
リボンの串が刺さっているところを見ると、お子さんは女の子に違いない。思わずそうして画像を見ていたら、どうにも小腹が空いてきたようだ。私は一寸作業を中断して、台所に向かう事にした。
駄文失礼。
さて、ここでaltにふさわしいのは次のうちどれでしょうか。
1
<img src='...' alt='可愛いお弁当の画像'>
2
<img src='...' alt='子供向けとおぼしき、美味しそうな、可愛いお弁当の画像。中央に子供の顔を模したおにぎり、周辺をコロッケ、からあげ、イカリング、ミニトマト、卵焼き、レタス、きゅうりが囲む。'>
3
<img src='...' alt='お弁当の画像だ。といってももちろん、ただのお弁当じゃない。俗に言う、愛情弁当ってやつだ。中央に子供の顔を模したおにぎり、周辺にはコロッケ、からあげ、イカリング、ミニトマト、卵焼き、レタスが見える。うん、美味しそうだ。'>
答えは「３」です。
解説
1
問題外。これはtitle属性に入れるべきです。
2
画像の様子を詳細に説明しています。
なぜこれがダメなのかというと文脈に沿っていないから。
この場合、前後が一人称なのに、急に3人称の説明口調になってしまいます。
もし仮に、一人称の文章、三人称の文章を区別するセマンティックな手段が存在すればこれでも良いかもしれませんね。（音声ブラウザではきちんとナレーション風の声に変わったりして）
3
前後の文脈と照らし合わせて違和感の無いような文章を構成しています。
書いてて気づいたのですが、この例だとそもそも画像自体に言及しているので、ちょっと差別化が難しく、やや極端な表現になってしまいました。実際には２の例をほんの少し手直しする程度で問題ないと思います。
そのまんまでも良い場合もある
たとえばサイトのロゴなど。
サイトのロゴが表しているのはその文字自体なので、それをそのまま書けば良い。
画像が無くても文脈が変わらない場合は空文字を入れる
たとえば先の例で、画像の内容を前後の文章ですっかり描写してしまっていて、補足的に画像を添えている場合は、altには空文字を入れることができます。
これは、この画像が無くても文脈には一切関わりがないからです。
やむをえずalt自体を省略できる場合もある
次のような場合は alt 属性を省略することができる。(MAY)
- 画像内容が不明な場合 (自動取得/生成やユーザー投稿など) で、かつ次のいずれかの条件を満たす場合
- img 要素に空文字列でない title 属性がある
- 空白でない
legendfigcaption 要素を含む figure 要素内に img 要素がある- img 要素が見出し (セクション) 内の唯一の内容となっている
- 画像が閲覧不可な環境 (低速回線やテキスト/音声ブラウザーなど) で、かつ利用可能な代替テキストがない場合
- 画像が閲覧可能な人に向けたプライベートな文書や HTML メール
- ただし代替テキストを指定することが強く推奨される
まとめ
alt属性は画像の説明ではなく、代役。
そこに画像があったことにすら気づかせないaltを書きましょう。