画像の代替テキスト
altは画像が見えない環境や検索理解の補助として適切に設定します。
本文
写真の役割から代替テキストを決める
商品写真のaltはキーワードを詰める欄ではありません。写真を見られない人にも、その写真が購入判断に加える情報を短く伝えます。正面写真、サイズ比較、傷の状態、使用例では必要な説明が異なります。
隣の文章と同じ情報を重ねるだけの装飾画像は空のaltにし、リンクになっている画像は移動先や操作が分かる文言にします。
画像を役割別に分ける
- 商品画像色、形、サイズ、傷など判断材料を伝える。
- 説明図手順や寸法の要点を本文にも書く。
- 装飾意味を持たない画像は空のaltで読み上げを増やさない。
- 画像リンク「写真」ではなく移動先や操作を伝える。
マグカップ写真ならどう書くか
一覧の代表写真なら「白い陶器のマグカップ、側面に青い線模様」。持ち手の大きさを示す写真なら「成人の手で持った状態。指が2本入る持ち手」といった具合に、写真ごとに違う情報を書きます。実物を確かめずに材質や容量を写真から推測して加えないでください。
W3Cの画像代替テキストの解説は、情報画像、装飾画像、画像リンクを用途別に分けています。
公開前・改善時に確認すること
| 確認項目 | 実務で見るポイント |
|---|---|
| alt | 画像の内容や役割を短く説明する。 |
| 商品画像 | 商品名、色、用途など購入判断に関係する内容を補う。 |
| 装飾画像 | 意味のない装飾は本文理解を邪魔しない扱いにする。 |
説明図はaltだけに頼らない
サイズ表を画像一枚にした場合、長いaltへすべての数値を詰め込むより、HTMLの表として寸法を掲載する方が読みやすく比較もしやすくなります。画像内だけにある返品条件や注意書きも本文へ移します。
altを削除するとスクリーンリーダーがファイル名を読む場合があります。装飾画像でも属性は残し、値を空にします。
画像更新時の点検
写真を差し替えたら、古いaltが残っていないかを確認します。
| 見る場所 | 確認すること |
|---|---|
| 内容 | 現在の商品の色・形・状態とaltが一致している。 |
| 役割 | 装飾は空、リンクは行き先、商品写真は判断材料を伝える。 |
| 本文 | 重要な寸法や条件が画像の中だけにない。 |