Website Usability Info

ここで今一度、<img>要素のalt属性の意味について確認しておきましょう。altとは、画像の代替テキストを意味します。ネットワークの回線事情などで画像を表示しない場合や、テキストブラウザや音声ブラウザなど画像を表示できない場合に、「代わりに何の画像なのかを伝える」役割を担うものです。この点を考慮して考えると、alt属性は「とりあえず何か、適当に記述しておけばよい」というわけにはいかないことが、おわかりいただけると思います。

というわけで、alt属性の具体的な記述ルールを、以下のように整理してみました。

• 画像には必ずaltを付けます（altを省略すると、テキストブラウザで当該画像のファイル名が表示されて煩わしくなったり、音声ブラウザが当該画像のファイル名をご丁寧に読み上げてしまうといった問題が生じます）。
• alt は「代替内容」なので、画像の代わりにその文字を置いてみても違和感がない内容にします。
• 画像がリンクの場合、alt の記述はリンク先を示す内容にします。
• 画像がただのアイキャッチャーの場合（隣接するテキストに、具体的な内容が書いてある場合）、alt="" （値なし）と記述します。
• 画像がグラフや図表など、ある意味を示す場合、その要約をalt に記述します。ただし、隣接するテキストに内容（の要約）がある場合はこの限りではなく、何のグラフ/図表なのかが示されていればよいです。
• 画像が文字イメージ（ロゴマークや見出しなど）を表現している場合、同等の文字列をalt に記述します。
• 画像に文脈上の意味が無い場合（たとえば単なる区切り線など）、alt=""（値なし）と記述します。

以上です。適切なaltの記述は、最低限のアクセシビリティを確保するための必須条件と言えます。この機会にぜひ、ご自身のWebサイトのソースコードをご確認いただくことをおすすめします。