画像を見ることが難しい人や、画像が表示されない環境でも、必要な情報へアクセスできることが大切です。代替テキストは、画像に代わって内容や役割を伝えるための言葉です。

すべての写真を同じように説明するのではなく、ページの文脈を見て決めます。同じ画像でも、何のために使うかによって適切な説明は変わります。

この記事で分かること
  • 情報を伝える画像と装飾の違い
  • 写真・文字画像・ボタンの考え方
  • 本文と重複しすぎない確認方法

最初に、画像が何を伝えているかを考える

商品を紹介する写真なら、商品を理解するための特徴が必要です。雰囲気づくりだけの装飾で、ほかに意味を持たない画像なら、説明を読み上げないよう空の代替テキストにする考え方があります。

判断に迷うときは、その画像を取り除いても必要な情報が残るかを確認します。W3Cの判断フローでも、画像に意味のある文字や情報があるか、操作のために使うかなど、役割に応じて考えます。

確認すること 整理のポイント
情報のある写真 ページで必要な特徴を簡潔に
装飾だけの画像 説明が不要かを文脈で判断
文字を含む画像 必要な文字情報を本文でも伝える
操作する画像 行き先や機能が分かる説明

写真の説明は、読み手に必要な特徴を選ぶ

例えば、入口を案内する写真なら「店舗の外観」より、「建物右側の青い扉が入口」といった説明が役立つ場面があります。一方、商品の色違いを比較する写真では、色や形などの違いを伝えます。

見えるものをすべて列挙する必要はありません。本文で何を説明しているかを見ながら、画像が補っている情報へ絞ります。確認できない人物の感情や関係を推測して書くことも避けましょう。

文字や操作を担う画像は、役割を言葉にする

料金や開催日を画像にだけ書いている場合は、必要な情報がテキストでも分かるようにします。長い料金表などは、代替テキストへ全文を押し込むより、本文や表として情報を用意する方法を考えましょう。

リンクやボタンになっている画像では、何の操作や行き先かが重要です。見た目の「右向き矢印」だけでなく、目的が分かる説明を考えます。ただし、隣の文字と組み合わされたボタンでは重複することもあるため、制作担当者と実装を確認してください。

ファイル名やキーワードをそのまま入れない

「IMG_1234」「店舗_集客_大阪」といった文字は、画像の内容を伝えていません。検索用の言葉を並べる欄として扱わず、文脈に合った自然な説明を作ります。写真の撮影者や出典は、通常、キャプションや別の出典欄で管理します。

WordPressでは、メディアの情報を変えても、すでに配置されたすべての画像へ同じ変更が反映されるとは限りません。実際に使っているページの画像を確認し、本文と合わせてチェックしましょう。設定欄を埋めることより、必要な情報が伝わることが目的です。

  • ✓画像を使う目的から考えた
  • ✓重要な文字情報が画像だけにない
  • ✓ファイル名や単語の羅列になっていない
  • ✓本文との重複を確認した
  • ✓実際の掲載ページを確認した

参考:W3C:代替テキストの判断フロー。まずは案内に欠かせない一枚から、見えないときにも何を伝える必要があるか考えてみてください。