alt属性の使い方
HTML5の仕様書には、HTML 4.01に比べて、alt属性の解説とサンプルが非常に多く掲載されています。HTML5では条件によってはalt属性を省略できますが、あくまでも特殊なケースであり、これまで通りalt属性を指定するのが原則だと考えてください。
alt属性の値には代替テキストを記述します。代替テキストは、「ページのimg要素がすべてalt属性の値に置き換わったとしても、ページの意味が変わらないこと」を基準に考えます。制作者が代替テキストを用意するときは、画像を使わないでページを制作する場合をイメージして考えるとよいでしょう。あるいは、「その画像を電話越しに伝えるには、どう説明するか？」と考えるのもよい方法です。
一方、alt属性の値として不適切な例に、キャプション、見出し、説明があります。alt属性は画像を補足するものではありませんので、補足情報はtitle属性を使用して記述します。
alt属性の値は、他のコンテンツと重複しないようにしましょう。プレーンテキストとして存在する内容をalt属性で繰り返す必要はありません。
ここからは、実際のWebサイトによくあるパターンをいくつか見ていきます。
●画像のみのリンクやボタン
a要素やbutton要素が画像のみを含んでいる場合、alt属性にはリンクやボタンの目的を伝えるテキストを指定します。
<a href="/"><img src="/img/logo1.png" alt="ASCII.jp" /></a>
1つのリンクに2つの画像を含んでいる場合は、1つのalt属性にまとめて記述できます。
<a href="/"><img src="/img/logo1.png" alt="ASCII.jp×Web Professional" /><img src="/img/logo2.png" alt="" /></a>もちろん、それぞれのimg要素のalt属性に分けても記述できます。
<a href="/"><img src="/img/logo1.png" alt="ASCII.jp" /><img src="/img/logo2.png" alt="×Web Professional" /></a>
●チャート・グラフ・図・地図・イラストなど
ユーザーにテキストだけで情報を伝えるのには限界があります。グラフや図、地図などの画像も、情報を伝えるのに優れたコンテンツです。ただし、画像を閲覧できないユーザーにも情報が正しく伝わるように、alt属性を使って代替テキストを提供する必要があります。
代替テキストは、画像が与える情報と同一であり、文字どおり画像を代替する内容であることが重要です。例を見てみましょう。以下のHTMLでは、カップ麺の作り方を示したフローチャート図を表示しようとしています。チャート画像が見られなくても問題ないように、alt属性にカップ麺の作り方がテキストで記述されています。
<p>カップ麺は、非常に簡単に作ることができます。</p>
<p><img src="/img/ra-men_step.png" alt="フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。三分待って、よくまぜて召し上がりください。" /></p>次のような画像ではどうでしょうか。
サンプル画像
このような画像の場合、alt属性値を以下のように記述していることがあります。
×誤った例
<h3>街角ネコ紹介</h3>
<p>今日のネコはこちらです。<br />
<img src="cat.jpg" alt="遠くを見ている薄茶色をした横向きのネコ" /><br />
すました顔がとってもクールなネコさんです！</p>
よく見かける書き方ですが、このalt属性はHTML5では誤った使い方です。正しくは次のようになります。
○正しい例
<h3>街角ネコ紹介</h3>
<p>今日のネコはこちらです。<br />
<img src="cat.jpg" alt="下町の通りで見かけた、横を向いて遠くを見ている、薄茶色をしたネコです。" /><br />
すました顔がとってもクールなネコさんです！</p>
両者の違いはごく小さなものと感じるかもしれませんが、誤った例では画像の「説明」になってしまっています。画像をオフにした状態で代替テキストの表示を比較してみましょう。
誤った例の代替テキスト
正しい例の代替テキスト
正しい例のほうが、文脈が自然であることが分かります。alt属性値は画像の説明ではなく、あくまでも画像を代替するテキストであることを意識して記述しましょう。画像に説明を加える場合は、title属性やfigure要素の中のfigcaption要素が適しています。
●アイコンやロゴ
アイコンやロゴといっても、文脈によって、つまり画像の使われ方によってalt属性の値は変わります。次の例では、アイコンはテキストと同じ意味を伝えているため、alt属性値は空になります。
<h2>関連ナビゲーション</h2>
<ul>
<li><a href="/blog/"><img src="/img/icon/blog.png" alt="" />開発ブログ</a></li>
<li><a href="/docs/kiyaku"><img src="/img/icon/kiyaku.png" alt="" />利用規約</a></li>
<li><a href="/inquiry"><img src="/img/icon/inquiry.png" alt="" />お問い合わせ</a></li>
</ul>
一方、以下の例ではアイコンだけで情報を伝えているため、alt属性には適切な値が必要です。
<h2>関連ナビゲーション</h2>
<ul>
<li><a href="/blog/"><img src="/img/icon/blog.png" alt="開発ブログ" /></a></li>
<li><a href="/docs/kiyaku"><img src="/img/icon/kiyaku.png" alt="利用規約" /></a></li>
<li><a href="/inquiry"><img src="/img/icon/inquiry.png" alt="お問い合わせ" /></a></li>
</ul>
サイトヘッダーに置くロゴのalt属性値には、企業名やサイト名などを記述します。一般的なロゴの使い方ですので、特に悩まないでしょう。
<h1><a href="/"><img src="/img/logo.png" alt="海鮮料理専門店 浜旬" /></a></h1>ロゴが使われるのは、サイトヘッダーだけではありません。たとえば、ロゴ自体について解説しているコンテンツでは、画像が表示されない場合でも意味が通じるような代替テキストを記述します。
<h2>海鮮料理専門店 浜旬のロゴについて</h2>
<p>当店のロゴには、当店を表す要素が凝縮されています。<br />
<img src="/img/logo.png" alt="ロゴには、自店で専用の漁船を持っている当店を表す漁船と、代々の料理長に受け継がれる伝説の出刃包丁が描かれているのです。" /></p>
<p>江戸時代から続く当店は、当時から店主自ら漁に出て、魚を捕っていました。</p>
ニュースサイトの記事などで、企業名やサイト名を補足する意味でロゴを使う場合は、alt属性値は空になるでしょう。また、本文と関係しているものの切り離せる内容なので、この例ではaside要素でマークアップしています。
<h2>海鮮料理専門店 浜旬がiOS専用アプリをリリース</h2>
<aside><img src="/img/logo/hamashun.png" alt="" /></aside>
<p>海鮮料理専門店 浜旬が、iOS専用アプリ、「今日も元気に海の幸」をリリースした。このアプリはメニュー（お品書き）がリアルタイムに更新され、メニューがその日の入荷状況によって変わる同店にとってキラーアプリとなる予定。</p>
●画像化されたテキスト
特殊なフォントを使ったり、文字間を精密に調整して見せたりしたいときは、テキストを画像化して使うことがよくあります。この場合は、単純に画像化したテキストをalt属性値とします。
<h3><img src="/img/h_nav.png" alt="サイトナビゲーション" /></h3>
●テキストを補足する画像
テキストによって十分な情報が与えられており、画像はあくまでも補足的な扱いの場合は、alt属性値は空になります。以下のサンプルは、前に登場した「カップ麺の作り方」のHTMLです。テキストのみでも情報としては十分ですが、補足するビジュアルとして画像が使われています。
<p>カップ麺は、非常に簡単に作ることができます。</p>
<p>フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。三分待って、よくまぜて召し上がりください。</p>
<p><img src="/img/ra-men_step.png" alt="" /></p>
画像にキャプションを入れたい場合は、title属性か、figure要素とfigcaption要素を使います。
<p>カップ麺は、非常に簡単に作ることができます。</p>
<p>フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。三分待って、よくまぜて召し上がりください。</p>
<p><img src="/img/ra-men_step.png" alt="" title="カップ麺の作り方のフローチャート" /></p>
figure要素を使う場合、画像は「自己完結していてメインコンテンツから参照されるもの」のはずなので、画像が表す情報（alt属性値）はテキストと重複せず、テキストとは異なった情報を持っていると考えます。alt属性には適切な値を記述しましょう。
<p>カップ麺は、非常に簡単に作ることができます。フローチャートも合わせてご覧ください。</p>
<p>フタを開けて、かやくとスープを取り出します。次に、かやくとスープの中身をカップの中に入れ、熱湯を注ぎます。三分待って、よくまぜて召し上がりください。</p>
<figure>
<img src="/img/ra-men_step.png" alt="まずフタを開けますが全部は切り取らず、少し残して開けます。かやくとスープの中身をカップの中に入れるために袋を開ける際は、飛び出さないようにご注意ください。また、熱湯を注ぐ際はやけどに十分にご注意ください。" />
<figcaption>カップ麺の作り方のフローチャート</figcaption>
</figure>
●装飾用画像
装飾用の画像は原則としてCSSを使って指定するべきですが、何らかの理由でCSSによる指定が難しい場合もあるでしょう。その場合は、スクリーンリーダーなどの支援技術が装飾用の画像を無視できるように、alt属性値を空にしたimg要素でマークアップします。
<div><img src="/img/decorative-border.png" alt="" /></div>
<h1>海鮮料理専門店 浜旬 公式ブログ</h1>
<p>その日捕れた魚だけを使う店、浜旬のブログです。</p>
装飾用の画像が記事本文に関連しており、かつ本文から切り離せる場合は、aside要素でマークアップしてもよいでしょう。
<h2>会議で使えるとっさのひとこと</h2>
<aside><img src="/img/kaigi_sozai.png" alt="" /></aside>
<p>ビジネスマンにとっては日常的に行われるのが会議。ボーッとしている時に限って、名指しで意見を求められたりするものです。そんな時に使えるとっさのひとことをご紹介します。</p>
