代替テキストは、画像を見られない人や画像が読み込めない状況で内容を伝える文章です。すべてへ同じキーワードを入れず、その画像が本文で担う意味を短く書きます。
代替テキストの役割
スクリーンリーダーが読み上げたり、画像が表示されない時に代わりに示されたりします。本文の理解に必要な情報を、周囲の文章と重複しすぎない形で書きます。
書き方の例
設定画面の画像なら「WordPress一般設定でタイムゾーンに東京を選んだ画面」のように、読者が確認すべき点を含めます。「画像」「写真」という語だけを足す必要はありません。
「書き方の例」まで進めたら、最初より画面の意味が分かってきました。
でも、保存した後にどこを見れば成功なのか、まだ少し心配です。
その不安は自然だよ。
設定画面の保存表示だけで終わらせず、公開側で変化を一つ確認すれば判断しやすい。
一度に全部を確認しなくていいんですね。
今回変えた場所だけ見るなら、私も見落とさずに進められそうです。
そう。
変えた項目と確認する画面を一組にして進めれば、原因が分からなくなるのを防げるよ。
空欄でよい画像
区切り線や背景など、内容を伝えない装飾画像は空欄にします。無意味な読み上げを増やさないこともアクセシビリティです。
避けたい書き方
記事タイトルの繰り返し、キーワードの羅列、ファイル名だけの入力は避けます。代替テキストだけ読んでも画像の役割が分かるかで判断します。
最後に確認すること
- 変更前に、何を直す操作かを確認した
- 保存または更新が完了したことを確認した
- 公開画面をPCとスマートフォンで開いた
- 分からない項目を推測だけで変更していない
一度で完璧に覚える必要はありません。この記事の順番どおりに一項目ずつ操作し、結果を確認してから次へ進めば、初心者でも安全に設定できます。
結論：画像が見えない人へ、画像の役割を文章で伝える
代替テキスト（alt）は、画像を見られない時に、その画像が本文で伝えている情報を補う短い文章です。検索キーワードを詰め込む欄ではありません。装飾だけの画像は空欄にし、情報を持つ画像には本文との関係が分かる言葉を書きます。
代替テキストが必要か判断する表
| 画像 | altの考え方 | 例 |
|---|---|---|
| 操作画面 | 読者が確認すべき場所を書く | 一般設定画面のタイムゾーンで東京を選択した状態 |
| 商品写真 | 商品と特徴を簡潔に書く | 白い机に置いた黒色のノートパソコン |
| グラフ | 結論を本文でも説明し、altは図の要点を書く | 表示時間が3秒から1.2秒へ短縮した比較グラフ |
| ロゴ | ブランド名やリンク先を伝える | WordPressサーバー研究所のロゴ |
| 飾りの模様 | 情報がなければ空欄 | 空欄 |
よいaltを書く4つの質問
- この画像が表示されなかったら、本文の何が分からなくなるか
- 読者は画像のどの部分を確認すべきか
- 前後の本文ですでに同じ説明をしていないか
- 「画像」「写真」と書かなくても種類が伝わるか
答えを一文にすると、画像固有のaltになります。すべてを詳細に描写する必要はなく、記事の文脈で必要な情報へ絞ります。
悪い例と書き直し例
| 悪いalt | 問題 | 書き直し |
|---|---|---|
| 画像 | 内容が分からない | 投稿設定のアイキャッチ画像選択欄 |
| WordPress SEO 初心者 おすすめ | キーワードの羅列 | 検索結果プレビューに記事タイトルが表示された状態 |
| screen01.png | ファイル名のまま | パーマリンク設定で投稿名を選ぶ画面 |
| 設定画面のスクリーンショット | 見る場所が不明 | ディスカッション設定のコメント手動承認チェック欄 |
投稿編集画面で設定する手順
- 投稿または固定ページの編集画面を開きます。
- 本文内の画像ブロックをクリックします。
- 右側のブロック設定を表示します。
- 「代替テキスト」欄へ画像の役割を入力します。
- 装飾画像なら空欄にし、必要に応じて装飾として扱う設定を確認します。
- 「更新」または「公開」を押します。
画像のキャプションは画面に見える補足、代替テキストは画像を利用できない場合の代替です。同じ文章を機械的に両方へ入れる必要はありません。
メディアライブラリで設定する場合
- 「メディア」→「ライブラリ」を開きます。
- 対象画像を選びます。
- 「代替テキスト」へ内容を入力します。
- 変更が保存されたことを確認します。
- 既に使っている投稿を開き、画像ブロックのaltも確認します。
メディアライブラリの変更が、既に挿入済みのすべての画像へ必ず同じように反映されるとは限りません。同じ画像でも、記事ごとに役割が違えばaltも変わります。重要な既存記事は編集画面で個別に確認します。
リンクになっている画像のalt
画像をクリックすると別ページへ移動する場合、altは画像の見た目だけでなく、リンクの目的が分かる必要があります。たとえば商品ロゴが公式ページへのリンクなら、ブランド名と遷移先の意味が伝わる言葉にします。「こちら」「バナー」だけでは移動先が分かりません。
同じリンク先へ画像と直後のテキストリンクが並ぶ場合は、読み上げが重複しない構造も検討します。HTMLを無理に変更せず、利用テーマやブロックの設定範囲で確認します。
グラフ・図解・操作画面の書き方
複雑なグラフの全データをaltだけへ詰め込むと読みにくくなります。グラフの結論や重要な数値は本文にも書き、altには「何を比較した図か」と「最も重要な結論」を簡潔に入れます。
操作画面では、画面全体の名称より、読者が次に押すボタンや確認する欄を書きます。個人情報、メールアドレス、契約IDなどが写っている場合は、alt以前に画像を加工して隠します。
公開後にaltを確認する方法
- 公開記事を開き、対象画像が正しい位置にあるか確認します。
-
ブラウザの開発者向け機能またはページHTMLで画像の
alt属性を確認します。 - 空欄にした装飾画像が、本文理解を妨げないか読み直します。
- 同じ言葉を全画像へ入れていないか確認します。
- 画像が表示されない状態でも手順や結論を理解できるか考えます。
成功の目印は、情報画像に内容と役割が分かるaltがあり、装飾画像は不要な読み上げを増やさず、本文だけでも重要な結論が失われないことです。
よくある失敗
- すべての画像へ記事タイトルを入れる
- ファイル名や「画像1」のままにする
- 装飾画像にも長い説明を書く
- キャプションとaltを同じ役割だと思う
- グラフの結論を画像だけに閉じ込める
- 個人情報が写った操作画面をそのまま公開する
既存画像を見直す優先順位
すべての画像を一度に直す必要はありません。アクセスの多い記事、操作手順の画像、商品比較の画像、リンクになっている画像から確認します。記事の理解や行動に影響する画像を先に直し、装飾画像は後でまとめて確認します。
よくある質問
キャプションとの違いは何ですか？
キャプションは画面上で全員に見える補足文です。代替テキストは画像の内容や役割を代わりに伝えます。
すべての画像に入力しますか？
内容を伝える画像には入力し、装飾だけの画像は空欄にします。