●画像が重要なコンテンツ
フォトギャラリーのように画像がページの重要なコンテンツである場合、alt属性値はどのように記述するべきでしょうか？
メインコンテンツが、グラフ、スクリーンショット、マンガ、写真作品などで構成される場合は、alt属性値を適切に記述して、画像が表示されなくても内容が変わらず伝わるようにする必要があります。
たとえば、グラフの場合は、グラフが伝える具体的な内容をalt属性値に記述します。「ユーザー数グラフ」のような文言は画像の説明にあたるので、alt属性ではなくtitle属性に記述します。
<p><img src="/img/graph.png" alt="2012年の1月から6月にかけて、登録ユーザー数は次のように増加した：5361人, 6423人, 7940人, 9245人, 12395人, 16496人。" title="ユーザー数グラフ" /></p>
以下は、料理の盛り付けを解説するページの写真の場合です。写真が表示されなくても、どのような盛り付けなのかが伝わるようにする必要があります。
<figure>
<img src="/img/moritsuke.png" alt="大きめのお皿にチキンライスを盛り付け、その中央に半熟状態にしたオムレツを乗せます。オムレツの端から端まで、縦方向に包丁を入れ、オムレツを開き、チキンライスの上にかぶせるようにします。このようにすると、オムライスの表面がトロトロ半熟卵になります。ケチャップをかけて完成です。" />
<figcaption>オムライスの盛り付け</figcaption>
</figure>
画像が不明瞭な場合や、複雑なフラクタル※、詳細な地形図などの場合は、画像を完全に代替するテキストは用意できないかもしれません。完全な代替は不可能だとしても、できる限りの代替テキストを記述しましょう。
以下は、地形図の代替テキストの一例です。
<p>これは、東京区部の高度を示した地形図です。</p>
<p><img src="/img/topographical-map.png" alt="全体的に、東にいく程高度が低く、西にいく程高度が高くなっています。しかし、江東区や品川区の一部などは、内陸の台東区などよりも高度が高い場所もあります。" /></p>代替テキストが無いケースも、稀に存在します。たとえば以下のようなものが考えられます。
- 定期的に静止画像が更新されるWebカメラ
- 写真共有サイトにアップロードされたが、代替テキストとなる情報が入力されていなかった場合
- 目の不自由な人が何の画像か分からないままにアップロードした画像
- 認証に使われるCAPCHA画像
これらのケースに限っては、alt属性自体を省略することができますが、次の条件のどちらかに一致しなければなりません。
- title属性があり、その値が空ではない
- img要素がfigcaptionを含んだfigure要素の中にあり、figcaption要素の内容はタブ文字や半角スペースのみでなくテキストが入っている。また、figure要素の中には、他のエンベッディッドコンテンツやテキストが存在しない
以下はWebカメラの例です。静止画が自動的に更新されるので、画像の様子をalt属性値にすることは現実的ではありません。
<p><img src="/img/webcamera/akihabara.jpg" title="秋葉原ウェブカメラ" /></p>
以下は、写真共有サイトにアップロードされた写真の例ですが、画像ファイルとタイトル以外の情報が入力されず、代替テキストを用意できなかったものです。
<figure>
<p><img src="/photo/user/hamashun/7647043554/" /></p>
<figcaption>近所の猫の写真</figcaption>
</figure>
もしかすると後日、写真をアップロードしたユーザーによって代替テキストとなる情報が追加入力されるかもしれません。その場合は、ソースコードもアップデートされる必要があるでしょう。
<figure>
<p><img src="/photo/user/hamashun/7647043554/" alt="OM-Cというカメラで撮影した写真です。下町の通りで見かけた、横を向いて遠くを見ている、薄茶色をしたネコです。" /></p>
<figcaption>近所の猫の写真</figcaption>
</figure>
ポイント
alt属性が省略できるのは必要最低限のケースです。代替テキストを記述することが本当にできないのか、よく検討しましょう。
●ユーザー向けでない画像
img要素はユーザーに画像を見せるために使うものですが、現実にはアクセス解析などの目的で画像を埋め込むこともあるでしょう。
ユーザー向けではない画像をimg要素で埋め込む場合は、alt属性値は空とし、width属性とheight属性は0にします。
<p><img src="/analysis.png" alt="" width="0" height="0" /></p>
ポイント
HTML5の仕様書では、img要素をレイアウト目的で使ってはならないと明記されています。特に、透明な画像（いわゆるスペーサーGIF）を使うべきではないとされています。
srcset属性
WHATWG版の仕様書では、srcset属性が追加されています。srcset属性は、Viewportの幅や高さ、デバイスピクセル比によって代替画像を指定できるというものです。たとえば、下のソースコードでは、デバイスピクセル比が2の場合に別の画像を表示できます。
<img src="/img/nav/blog.png" srcset="/img/nav/blog@2x.png 2x" alt="Blog" />srcset属性は今後変更される可能性が高いので、現時点では「そういう動きがあるんだ」という程度に覚えておけばよいでしょう。
著者：浜 俊太朗 （はま・しゅんたろう）
NHN Japanで働くマークアップエンジニア／ディレクター。
ブログ「hamashun.me」はコーディングに限定せずさまざまな話題を扱っている。主な著書に「一週間でマスターするXHTML & CSS for Windows」（毎日コミュニケーションズ刊）がある。趣味はカメラとネットゲームと椅子。
