<img>要素のalt属性の入れかた

Webページに画像(写真や挿絵など)を配置する際、「<img>要素にはalt属性を入れること」という話は、サイト運営や制作に携わる方なら一度は聞いたことがあると思います。ところが、「具体的にどうalt属性を記述したらよいのか、わからない」という方も多いのではないでしょうか。実際、私自身が某社のサイト構築ガイドライン策定に参加したときのことですが、ウェブマスターさんや制作会社の方から「もう少し具体的に、どうaltを書くべきなのか規定してくれないと困る」と言われたことがあります。

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

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

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