ウェブサイトに役立つ画像の説明を書く

画像には、複数の種類の説明が必要な場合があります。配置の指示は、画像をどのように使うかをサイト作成ツールに伝えます。表示されるキャプションは、読者に背景を説明します。代替テキストは、画像を見られない人に重要な視覚的意味を伝えます。これらの役割は重なることがありますが、互いに置き換えられるものではありません。

意図をサイト作成ツールに伝える

画像に何が写っているか、なぜ追加するのかを説明しましょう。たとえば、「これは私が修復した椅子です。修復プロジェクトの横に、修復前の画像の後に配置してください。」のように伝えます。重要なトリミングの希望があれば含めてください。事実として確認できていない顧客の推薦、場所、製品仕様をサイト作成ツールに推測させないでください。

背景の説明にはキャプションを使う

キャプションには、プロジェクト名、日付、写っている工程などを記載できます。見出しを繰り返すのではなく、役立つ情報を加えるようにしましょう。画像が架空のコンセプトや練習用プロジェクトの場合は、その背景を明確に示してください。公開前に名前や日付を確認しましょう。

すべての画素ではなく意味を説明する

代替テキストでは、その画像が文脈の中でどのような役割を果たすかを伝えます。プロジェクトの写真なら、完成品を簡潔に説明する必要があるかもしれません。装飾的な模様なら、読み上げを省略できるよう代替テキストを空にする場合があります。画像に重要な説明や価格が含まれている場合は、その情報をページ上の実際のテキストとしても掲載してください。

周囲のセクションと合わせて確認する

見出し、段落、キャプション、画像の説明を続けて読みましょう。ページを読み進めにくくする重複表現は削除します。画像が読み込まれなくても、訪問者が重要なメッセージを理解できるか確認してください。画像に写っていないことを、その画像が証明しているとテキストで主張してはいけません。

VollSiteで画像を追加するときは、その役割を説明し、依頼した変更が完了した後に生成された配置を確認してください。元のファイルは別に保管し、公開する権利のある素材だけを使いましょう。アクセシビリティの基本的な指針については、https://web.dev/learn/design/accessibility をご覧ください。自動チェックで見つけられる説明の不足もありますが、文言が適切な意味を伝えているかは、人が判断する必要があります。