IMAGE ALTERNATIVES
同じ写真でも、伝える言葉は変わる。
画像を配置するとき、altに何を書けばよいか迷うことがあります。「写真に写っているものを全部説明する」「検索向けのキーワードを入れる」と考える前に、その画像をページに置いた目的を確認しましょう。
たとえば、打ち合わせ中の写真でも、仕事内容を説明する事例では具体的な情報を持ち、雰囲気を添えるだけの場所では装飾として扱うことがあります。判断の出発点は画像単体ではなく、周囲の文章との関係です。
1. 情報・装飾・操作の役割を整理する
W3C WAIのImages Tutorialは、画像の目的に応じた代替テキストの考え方を示しています。情報を伝える画像では重要な内容を簡潔に表し、純粋な装飾画像には空のaltを使います。画像だけで構成されたリンクやボタンでは、操作の目的が伝わることが必要です。参考：W3C WAI Images Tutorial
| ページ内の役割 | 考えること |
|---|---|
| 内容を伝える写真・図 | 画像がないと何の情報が失われるか |
| 雰囲気を添える装飾 | 読み上げに情報を追加する必要があるか |
| 画像だけのリンク・ボタン | どこへ進むか、何を実行するか |
この表は作業の入口です。判断が難しい場合は、参考資料にある各分類の例を読み、実際のページの文脈へ当てはめます。
2. 「画像を外したら何が足りないか」を書く
制作時には、まず画像を見ない状態で本文を読んでみます。商品の色違いが文章にない、設置前後の違いが写真でしか分からない、といった不足を一文にすると、代替テキストの候補を作りやすくなります。
架空の施工事例なら、「入口の段差にスロープを設置した状態」のように、記事で伝えたい変化を表せます。根拠がないのに「誰でも安全に使える入口」と評価まで加えるのではなく、画像と本文で確認できる情報にとどめます。
3. 装飾では空のaltと省略を区別する
装飾として使うimg要素の基本例は次のようになります。alt属性自体を消すことと、空の値を指定することは同じではありません。
<img src="decoration.png" alt="">同じ画像でも、本文で説明する内容や配置が変われば役割も変わります。画像フォルダー全体に同じ設定を機械的に当てるより、使われているページで確認しましょう。
4. 長い情報は本文にも置く
比較図やグラフが複数の数値・関係を示す場合、短いaltだけにすべてを詰め込むと内容を追いにくくなります。図が何を示すかを短く説明し、詳しい数値や結論は近くの本文や表で読めるようにします。
制作担当と記事担当が分かれているなら、画像一覧に「役割」「伝えたい内容」「本文で補足する場所」の三項目を用意すると、altだけを最後に埋める作業になりにくくなります。
5. 原稿と実装をセットで確認する
- ファイル名がそのまま説明文になっていないか。
- 画像を置いた目的と、altの内容が対応しているか。
- 近くの文章を不必要に繰り返していないか。
- 操作用画像の意味が、見た目を知らなくても分かるか。
最後に、実装されたページでも読み上げや画像非表示の状態を確認します。練習では、一つのページから写真三点を選び、画像を使う理由を一文ずつ書いてみてください。altは画像への名前付けではなく、画像が担っている情報や機能を別の形で渡す設計です。