画像のalt(代替テキスト)の書き方。役割に合わせた3つの例

結論

画像のalt(代替テキスト)は、画像が見えないときに内容や役割を伝えるための設定です。内容を伝える写真なら要点を短く書き、飾りだけなら空にします。画像だけでできたリンクなら、写っているものより、押すとどこに進むかを書きます。

1. 内容を伝える写真は、写真の要点を短く書く

施工事例で、写真が工事後の変化を伝えているなら、「写真」だけでは何が変わったか分かりません。たとえば、窓の内側にもう一枚の窓を付けたことを示す画像なら、「既存の窓の内側に取り付けた白い内窓」と書けます。実際に写っていて、ページの内容を理解するのに役立つことを選びます。

Google は、代替テキストとページの文脈などを画像の理解に使います。検索語を増やすより、何を伝える画像かを優先します。図やグラフで伝えることが多い場合は、要点やデータを本文にも置きます。

2. 飾りだけの画像は、代替テキストを空にする

見出しの横にある飾りの星など、消しても情報や機能が変わらない画像は、HTML の画像タグで alt="" と指定します。画像の中の文字と同じ内容が近くの本文にもあり、画像で伝える追加の情報や機能がなければ、alt は空にできます。

alt="" は、空の代替テキストを指定した状態です。alt の指定そのものがない場合とは違います。編集画面で空欄にしたときの扱いが分からなければ、公開ページの HTML で alt="" になっているか確認します。

3. 画像だけのリンクでは、行き先を書く

内窓の写真だけを押して施工事例へ進むなら、alt は「内窓の施工事例を見る」のように、行き先が分かる文にします。同じリンクの中に行き先が分かる文字もある場合は、画像が新しい情報を足しているかを見ます。文字と同じ内容を繰り返すだけなら、画像の alt を空にできます。

リンクの言葉を決める考え方は、「内部リンクの貼り方。リンク元の選び方と文言の見本」も参考になります。

今日やることは、公開ページの画像1枚のaltを確かめる

公開ページを1つ開き、画像を1枚選びます。画像の意味を伝えるのか、飾りなのか、画像だけがリンクになっているのかを考えて、その画像の alt を見直します。

WordPress の画像ブロックを使っている場合、掲載済みの画像は、そのページを編集して画像ブロックの設定で直します。メディアライブラリの代替テキストは、画像を別の場所に挿入するときの初期値です。飾りだけの画像は、ブロック設定に装飾として指定する項目があれば使えます。詳しい場所は文末の WordPress 公式ガイドを参照してください。迷う画像は、W3C の日本語の判断表で役割をたどれます。

出典