画像のalt・代替テキストの書き方

画像が伝える情報を書く

ページの内容を音声で読む「画面読み上げソフト」は、画像の代わりにaltの文章を読むことがあります。画像を読み込めないときにも、説明が役立ちます。「IMG_0012」などのファイル名や「写真です」だけでは、何が写っているか伝わりません。

商品写真なら、商品選びに必要な特徴を書きます。バッグの内側を見せる写真ならポケットの有無、背負った様子なら体に対する大きさなどです。写っている物をすべて書くより、その写真を載せた理由に合わせて説明します。

アクセス案内に入口の写真を載せるなら、「建物の右側にある、青い扉の入口」と書けます。「おしゃれな入口」より、初めて来る人が探すときに役立ちます。周囲にある車や雲まで説明する必要はありません。

同じ写真でも、ページで伝えたいことが違えばaltも変わります。本文だけでは伝わらない情報を補うための説明なので、人物の気持ちなど、写真から確かめられないことは書き足しません。

細かな図の情報は本文や表にも

グラフや案内図に細かな情報が多いときは、長い説明をすべてaltへ入れず、近くの文章や表にも載せます。altでは「月別の来店数を示すグラフ」のように図の内容を短く示し、月ごとの人数は表で読めるようにすると、数字を見比べやすくなります。

押せる画像は操作の結果を書く

画像だけを押して別ページへ移動する場合は、行き先が分かる説明にします。教室の写真を押すと日程ページへ進むなら、たとえば「教室の開催日程を見る」と書けます。虫眼鏡のマークだけの検索ボタンも、「虫眼鏡」ではなく「検索」とすれば操作の目的が伝わります。

説明が不要な飾りの画像

背景の模様など、内容を理解するために必要のない飾りは、読み上げる説明を付けない場合があります。HTMLではalt=""と書き、説明が空であることを指定します。altの指定そのものを消すのとは違います。

編集サービスによっては「装飾用の画像」などの設定があります。欄を空にしただけで読み上げの対象から外せるか分からない場合は、サービスの案内で確認するか、制作者に設定方法を尋ねてください。商品や場所を説明する写真まで、一律に空欄にするのは避けます。

画像下の説明文とaltの違い

画像の下に表示する説明文と、altは別の設定です。全員に読んでほしい補足は本文や画像の下へ、画像を見られないときに必要な情報はaltへ入れます。

altは、編集画面で画像を選び、「alt」や「代替テキスト」の欄に入力します。欄の場所はサービスによって異なります。保存後に本文と続けて読んでみると、同じ説明を重ねていないか、写真がなくても内容が分かるかを確かめられます。