画像のaltに何を書くか、ページでの役割から決めよう

画像を入れるたびに、altへファイル名を書いたり、写っているものを全部説明したりしていませんか。altは画像の代わりに伝える文字です。何を書くかは、写真そのものだけでなく、そのページで何を伝えるために使うかで変わります。

この記事では、架空の園芸教室の案内を題材に考えます。花の写真を使った装飾、会場の入口を示す写真、別の案内へ進む画像を比較します。写真やページは模擬の設定であり、掲載コードの画像ファイルは読者が練習用に用意する想定です。

画像を隠したら、何の情報がなくなるか

最初に、周囲の文章を含めてページを読みます。入口を案内する場所に写真があり、その写真でしか入口の目印を伝えていないなら、その情報は文字でも必要です。たとえば「白い門の右側にある、緑色の扉が教室の入口」と書けます。

一方、教室名の横に小さな花を飾り、花の種類が参加判断に関係しないなら、毎回その花を説明する必要はありません。ここでの違いは写真の美しさや大きさではなく、読者が失う情報の有無です。

WAIのalt判断フローでは、意味を伝える画像、周囲と重複する情報、装飾、操作のための画像を分けて考えています。以下はその考え方を模擬案件へ当てはめた編集例です。

必要な情報を、ページの目的に合わせて書く

入口の写真には、参加者が入口を見分けるための説明を付けます。「入口の写真」だけでは、何が目印か分かりません。反対に、空の色や植木の数まで書くと、探している入口の情報が埋もれます。

<img src="classroom-entrance.jpg"
     alt="白い門の右側にある、緑色の扉が教室の入口"
     width="800" height="600">

これは、指定の写真を別途置いて使うHTML断片です。寸法も写真に合わせて変更します。段差の有無など、写真だけでは確定できない情報は推測して説明に加えず、会場担当へ確認したうえで本文に書きましょう。

もし同じ入口の説明が画像のすぐ隣に十分な文章で示されているなら、写真で追加して伝える情報があるかを再検討します。「すべての画像へ同じ長さの説明を付ける」というルールにはしません。

装飾は空のalt、画像だけのリンクは行き先を示す

装飾用の花ならalt=""とします。属性自体を省くのではなく、空であることを明示します。装飾を読み上げる情報として増やさず、必要な案内へ進めるようにするためです。

<img src="flower-decoration.svg" alt="" width="80" height="80">

画像だけがリンクの中にある場合は、見た目の説明より行き先が必要になります。たとえば練習用の会場案内ページへ進むなら、次のような形です。venue.htmlは別途作るページ名の例です。

<a href="venue.html">
  <img src="venue-map.jpg" alt="園芸教室の会場案内"
       width="320" height="200">
</a>

このaltを空にすると、画像以外に名前のないリンクになります。同じリンク内へ「会場案内」という文字を置く構成なら、画像のaltを空にできる場合もあります。リンクの使い分けはリンクとボタンの役割を整理した記事も参照してください。

画像を見ずに、本文とaltから用件を読み取る

自分のページから三枚選び、「画像を見られないと失う情報」「近くの文章で伝わる内容」「リンクの有無」をメモします。それぞれにalt案と理由を書き、画像を隠したつもりで本文だけを読み返してください。

読み上げ環境が使える場合は、実際に聞いて同じ内容が重複しすぎないか、リンク先が判断できるかを確認します。地図やグラフの詳しい内容は短いaltだけに詰め込まず、本文で説明する方法も検討します。操作を含めた点検を続けるなら、アクセシビリティの無料レッスンで確認範囲を広げられます。