こんにちは。バナナデスクです。
商品写真のaltに「卓上ライト」と書いたとします。でも、その画像を押すと説明書が開くなら、読者に必要なのは商品名より「使い方を見る」という案内かもしれません。
altは、写真に写っているものを全部書く欄ではありません。その場所で画像が伝えている意味や役割を、文字でも受け取れるようにするためのものです。同じ画像でも、装飾として置くのか、特徴を説明するのか、リンクとして使うのかで適切な文章は変わります。
ここではブログで迷いやすい用途を分け、書き方の例とHTMLの確認方法を見ていきます。検索キーワードを詰める作業から離れると、かえって書くべき内容がはっきりします。
まず、画像を消したときに何が伝わらなくなるか考える
記事の本文から画像だけを取り除いたと想像してください。商品を操作する場所が分からなくなるのか、グラフの数字が消えるのか、それとも内容は変わらないのか。この違いが出発点です。
W3Cのaltの判断手順は、情報を伝える画像、機能を持つ画像、装飾などを分けています。文章の長さを一律に決めるのではなく、ページの文脈に必要な意味を伝える考え方です。
たとえば、執筆の休憩について書いた記事に置くコーヒーの写真が、雰囲気だけの飾りなら空のaltが候補になります。一方、抽出量の違いを比較する写真なら「左は150mL、右は250mL」のように、比較に必要な差を伝えます。商品の容器が見えているからといって、どちらも「コーヒーカップ」で済むわけではありません。
ブログで使う8つの記入例
次の表は、書き方を考えるために用意した架空の掲載例です。実際には周囲の本文、キャプション、リンクの文字と合わせて判断してください。
| 掲載場面 | altの例または指定 | 選び方 |
|---|---|---|
| 商品を説明する写真 | 卓上ライトの背面にある明るさ調整ダイヤル | 操作箇所を知るための写真。色や背景より位置を優先する |
| 雰囲気だけの写真 | alt=”” | 記事の意味や操作に情報を追加しない装飾 |
| 画像だけのリンク | 卓上ライトの使い方を見る | 風景や色ではなく、移動先の用事を伝える |
| 本文と同じリンク内の写真 | alt=”” | 同じリンクの文字で行き先が伝わり、写真が追加の意味を持たない場合 |
| 編集画面の一部 | 画像設定の「代替テキスト」欄 | 操作する対象が分かる短い説明。手順の詳細は本文へ |
| 案内画像だけに日時がある | 説明会：11月8日14時、オンライン開催 | 日時や参加方法は画像だけに閉じ込めず本文にも記載する |
| 複雑なグラフ | 月別の受付件数。各月の値は直後の表に記載 | 数値と条件のすべてをaltへ押し込まず、本文と表で提供する |
| 比較図 | 画像だけのリンクと、文字付きリンクでaltを分ける例 | 比較する違いを要約。図の結論も近くの本文に置く |
「画像」「写真」という語を毎回付ける必要はありません。ただし、写真とイラストの違いそのものが意味を持つ記事なら、その違いを書きます。たとえば完成品の写真と完成予想図を比較するときは、予想図を実物と誤認させない説明が必要です。
画像がリンクなら、形より移動先を伝える
虫眼鏡の絵が検索ボタンになっている場合、読者が知りたいのは「虫眼鏡」ではなく「検索する」という機能です。W3Cの機能を持つ画像の解説も、画像の見た目より操作の目的を伝える扱いを示しています。
<a href="/lamp-guide">
<img src="lamp.jpg" alt="卓上ライトの使い方を見る">
</a>逆に、同じリンクの中に「卓上ライトの使い方を見る」という文字があり、写真がそれ以上の情報を加えないなら、写真のaltを空にして重複を避ける方法があります。
<a href="/lamp-guide">
<img src="lamp.jpg" alt="">
卓上ライトの使い方を見る
</a>ここで重要なのは、文字が単に近くにあるだけか、同じリンクに含まれているかです。写真だけが別のリンクで、そのaltも空だと、写真のリンクの目的が伝わらない場合があります。記事一覧のカードなどは、実際のHTMLで確かめてください。このブログの本文図解には拡大リンクを付けず、図として直接読めるようにしています。
図解やグラフは、altだけで説明を完結させない
複雑な図の情報を一文へ押し込むと、代替文自体が読みにくくなります。短い説明で図の役割を伝え、判断に必要な数値、条件、手順を本文や表へ置きましょう。W3Cの複雑な画像の解説では、短い説明と詳細なテキスト情報を組み合わせる方法を扱っています。
仮に1月12件、2月18件、3月15件という受付件数の棒グラフを載せるなら、altには「1〜3月の受付件数。月別の値は次の表に記載」と書き、表に12・18・15件を置けます。3か月合計45件という計算も本文で読めるようにします。これなら、画像を見られない読者も数字を確かめられます。
スクリーンショットも同じです。「設定画面」とだけ書いて終わるのではなく、画像で注目させる場所を短く説明します。クリックする順番は、スクリーンショット内の小さい番号だけでなく本文の手順として残します。
入力後は、公開されるHTMLのaltを確認する
WordPressなどの編集画面に入力欄があっても、その画像がページ上でどう出力されたかまで見ると安心です。既存の本文画像、記事一覧用画像、テーマ独自の表示は、入力内容の反映のされ方が異なることがあります。
- 対象の画像を含むページを表示し、どの用途の画像か確認します。
- ブラウザの開発者ツールで該当する
img要素を確認します。 alt="説明文"または意図したalt=""があるかを見ます。- 画像の説明を声に出して前後の文章へつなげ、重複や情報不足を探します。
- 画像がリンクなら、画像を見ずに移動先が分かるかを別に確認します。
alt=""とalt属性そのものが存在しない状態は区別してください。装飾だから空にするという判断を、単なる記入忘れにしないためです。画像を非表示にして文章を確認する作業は役立ちますが、それだけで支援技術のすべての読み上げ挙動を検証したことにはなりません。
迷ったときは、キーワードではなく不足した意味を直す
「SEO ブログ alt 書き方 おすすめ」という説明は、写真の代わりになりません。何の用事でその画像を置いたのかが伝わらなければ、単語を増やしても解決しないからです。
まず画像を一枚選び、「この画像がないと読者は何を判断できなくなるか」を一文で答えてみてください。答えが操作箇所ならその位置を、比較なら差を、リンクなら行き先を書きます。意味を追加しない装飾なら、空のaltも適切な選択肢です。すべての画像を長く説明するより、用途に合った代替文を一枚ずつ整える方が、読みやすい記事になります。