結論：画像の代替テキストは、ファイル名から実装担当が一律に作るものではありません。制作側が「この場所で画像が何を伝えるか」を整理し、事実や意図を顧客と確認してから、実装担当が適切な形で反映します。装飾だけの画像には説明文を付けず、空のalt属性にします。
紙の制作では、写真の選定理由や図版の意味をディレクター、デザイナー、顧客で共有してから入稿することがあります。Webではその情報に「画像が見えないとき何を伝えるか」を一行加えると、実装時の判断がしやすくなります。W3Cの画像チュートリアルも、代替テキストは画像の用途と周囲の文脈で決めると説明しています。
まず、画像の役割を三つに分ける
情報を伝える画像は、その場所で伝えたい要点を短く書きます。たとえば製品写真なら、本文にない形や特徴が判断材料かを考えます。装飾画像は、近くの文章を補わず見た目だけを整えるなら alt="" にします。画像だけのリンクやボタンは、絵の形より移動先や操作を伝えます。複雑なグラフは一文のaltだけへ押し込まず、数値や結論を本文にも置きます。
同じ店舗外観の写真でも、アクセス案内では入口の位置を伝え、会社紹介の雰囲気写真なら装飾に近い場合があります。「画像ごとに正解の一文」を素材フォルダへ固定するのではなく、掲載箇所と一緒に判断します。周囲の見出しや本文に同じ情報がすでにあるなら、重複読み上げも避けます。
架空の画像引き継ぎ例
以下は架空の会社案内サイトを想定した記入例です。実案件の画像・顧客・検収結果ではありません。文案は掲載するページと周囲の文章を見て確定します。
- 事業紹介／制作途中の家具の写真：役割は仕事内容を伝えること。alt案「作業台に置かれた組み立て途中の木製家具」。顧客が写真の事実を確認。
- 見出し下／葉の模様：役割は装飾のみ。説明文は付けず、HTMLでは空のalt属性を指定。制作側が用途を確認。
- 地図への画像ボタン：役割は移動先を示すこと。alt案「店舗へのアクセスを見る」。制作側がリンク先を確認。
- 売上推移の図：役割は数値を伝えること。altは図の概要とし、要点と数値を本文にも掲載。顧客が数値を確認。
この例の「確認者」はW3Cが定める担当制度ではなく、案件での役割分担例です。実装担当へは画像ファイルだけでなく、掲載URLまたは画面名、周囲の見出し、役割、文案、確認者を渡します。事実確認が未了なら「未確定」と明記し、推測した説明を本番へ入れません。
制作から実装へ渡す三段階
- 制作側が用途を付ける：各画像を情報・装飾・操作に分け、掲載箇所と周囲の文章を記入します。元のデザイン意図を最も把握している人がここを担います。
- 顧客と内容を確かめる：人物、場所、製品、数字、サービス内容など、事実が関係する文案は顧客に確認します。説明に不要な個人名や未公開情報は入れません。
- 実装して画面で検査する：実装担当がHTMLやWordPressへ反映し、altの有無、リンク先、本文との重複、画像を非表示にしても意味が通るかを確認します。自動検査だけで文脈の適否を断定しません。
Google Search Centralも画像を理解する手がかりとしてaltと周辺テキストを案内しています。ただし、キーワードを詰め込んだaltで検索順位が上がると保証するものではありません。まず人が画像の情報や操作を理解できることを基準にします。
装飾画像のaltは省略してよいですか？
単に属性を省くのではなく、装飾のみの画像には空の alt="" を指定します。背景画像など別の実装方法もあります。意味のある画像かどうかは掲載文脈で確認します。
写真の代替テキストは顧客が全文を書く必要がありますか？
必ずしも必要ありません。制作側がページの目的に合う文案を用意し、顧客には写真の事実や公開可否を確認してもらう分担にできます。最終的な担当は案件内で決めておきます。
GreenCodingへ相談できること
GreenCodingは支給デザインのコーディングやWordPress実装を相談できます。画像の役割と掲載場所を共有いただければ、altの実装、装飾画像の扱い、リンク画像の操作名、公開前の表示確認を案件の範囲に合わせて整理します。写真の事実や訴求内容まで実装側で勝手に決めず、制作会社・顧客の判断を受け取って進めます。