画像の代替テキスト「alt」の基本：書く画像と空にする画像の見分け方
この記事と画像はAIが作成しました。
画像の 代替テキスト とは、画像を見られない人や、画像が表示されない場面のために、画像の代わりに内容を伝える文字のことです。HTMLでは、画像を表す img 要素の alt 属性に書きます。画面の文字を音声で読み上げるソフト（スクリーンリーダー）を使う人は、この文字を耳で聞きます。
画像の使われ方で書く内容が変わる
W3C（ウェブの標準を定める国際団体）のWAI（ウェブアクセシビリティの取り組み）は、alt に何を書くかを決める判断の流れを示しています。最初の問いは、画像に文字が含まれているかどうかです。
- 文字を含み、同じ文字が近くに本文として書かれている場合：
altを空にします。 - 文字を含み、その文字が視覚効果のためだけに使われている場合：
altを空にします。 - 文字を含み、その文字にアイコンのような固有の働きがある場合：文字そのものではなく、画像の働きを
altに書きます。 - 文字を含み、その文字がほかのどこにも書かれていない場合：画像の文字を
altに書きます。 - 画像がリンクやボタンに使われていて、画像がないとリンクやボタンの働きが分かりにくい場合：リンク先や、ボタンを押すと起きることを
altに書きます。 - 単純な図や写真が、ページに意味を加えている場合：その意味が伝わる短い説明を書きます。
- グラフのような複雑な情報の場合：その情報をページの別の場所にも文章で書きます。
W3Cは、この判断の流れがすべての場合を扱うわけではないとも述べています。迷ったときは、W3Cの画像のチュートリアルで詳しい説明を確認します。
飾りの画像は alt を空にする
ページに情報を加えない画像は、装飾的な画像 と呼ばれます。見た目を整えるための画像や、近くの文章と同じ内容を繰り返す画像が当てはまります。装飾的な画像には、alt="" のように値を空にした alt 属性を付けます。
空にする理由は、スクリーンリーダーが画像を読み飛ばし、不要な読み上げで利用者の邪魔にならないようにするためです。alt 属性そのものを書かないと、スクリーンリーダーによっては画像のファイル名を読み上げることがあります。
書く前に確かめること
画像が装飾的かどうかは、その画像がページに置かれている目的で決まります。同じ画像でも、別のページでは情報を伝える役割を持つことがあります。画像ごとに「この画像がなくても、ページの内容や操作は同じように分かるか」を問い、分かるなら空に、分からないなら不足する内容を書く、と考えると判断しやすくなります。
出典
ウェブサイトの基本を整える「ウェブ基礎固め」については、株式会社グレイディエントへお問い合わせください。