Webサイトで画像を使うと、内容を直感的に伝えたり、ページの印象を整えたりできます。しかし、画像だけに重要な情報を持たせると、視覚的に確認しにくい人やスクリーンリーダーを利用している人には、その情報が届かないことがあります。
画像のWebアクセシビリティで大切なのは、見た目を整えることだけではありません。画像が何を伝えているのかを、テキスト、説明、配置、見やすさによって補い、できるだけ多くの人が同じ内容を理解できるようにすることです。この記事では、ホームページに画像を作成・掲載するときに確認したい基本ポイントを整理します。
- 画像に適切な代替テキストを付ける
- 図やグラフなどは、必要に応じて本文でも説明する
- ファイルサイズを抑え、読み込みやすくする
- 文字や重要な要素のコントラストを確保する
- 装飾画像と情報を伝える画像を区別する
画像アクセシビリティは何を整える取り組みか
画像アクセシビリティとは、画像の内容や役割が、見え方や利用環境に左右されず伝わるようにすることです。たとえば、視覚障害のある人、画像の読み込みを止めている人、通信環境が不安定な人、スマートフォンの小さな画面で見ている人などは、画像そのものを十分に確認できない場合があります。
そのときに役立つのが、代替テキスト、本文中の補足説明、読みやすい色とサイズ、軽い画像データです。Webアクセシビリティ全体の考え方を確認したい場合は、関連する基礎記事としてWebアクセシビリティとは何かも参考になります。
1. 代替テキストは画像の役割を言葉にする
代替テキストは、画像が表示されないときやスクリーンリーダーでページを読むときに、画像の内容を伝えるためのテキストです。単に画像を説明するだけでなく、そのページの文脈で画像が果たしている役割を短く伝えることが重要です。
たとえば、同じ人物写真でも、採用ページなら職場の雰囲気を伝える画像かもしれません。サービス紹介ページなら、利用シーンを伝える画像かもしれません。代替テキストは、画像単体ではなく、ページ内でその画像が何を補っているのかを見て決めます。より詳しい書き方は、代替テキストとは何かでも整理しています。
代替テキストを書くときの考え方
- 画像が伝えている意味を、ページの文脈に合わせて書く
- 画像、写真などの抽象的な表現だけで終わらせない
- 本文と同じ内容を不必要に繰り返さない
- 装飾だけの画像には、読み上げ対象にしない設定を検討する
| 画像の種類 | 代替テキストの考え方 | 書き方の例 |
|---|---|---|
| 商品やサービスの写真 | 何を示している画像かを簡潔に伝える | ノートパソコンで予約画面を確認している利用者 |
| 操作説明のスクリーンショット | 画面名、操作対象、確認すべき状態を伝える | 設定画面で通知をオンにする項目が選択されている |
| 雰囲気づくりの装飾画像 | 本文理解に不要なら読み上げない | 空の代替テキストにする |
2. 図やグラフは本文でも意味を補う
代替テキストは便利ですが、複雑な図、グラフ、地図、比較表の内容を一文だけで十分に伝えるのは難しい場合があります。そのような画像では、代替テキストだけに頼らず、本文の近くに要点を説明する文章を置きます。
たとえば、グラフを掲載する場合は、グラフが示す大まかな傾向や、読者が読み取るべき結論を本文で説明します。地図を掲載する場合は、地図画像だけでなく、住所、最寄り駅、入口の位置など、行動に必要な情報をテキストでも確認できるようにします。
スクリーンリーダーでの読み上げを意識する場合は、画像説明だけでなく、見出し、本文、リンクテキストの順序も重要です。読み上げ環境の基本は、スクリーンリーダーとは何かでも確認できます。
3. 画像サイズを抑えて読み込みやすくする
画像のファイルサイズが大きすぎると、ページの読み込みに時間がかかり、閲覧体験を損ないます。通信環境が安定しない場所やモバイル回線で見ている読者にとっては、画像が重いだけでページを読む負担が大きくなります。
画像を掲載するときは、必要以上に大きな画像をそのまま使わず、表示サイズに合わせて調整します。圧縮率の高い画像形式を使う、不要な余白を削る、同じ意味を持つ画像を重複して置かない、といった工夫も有効です。
公開前に確認したいこと
- 表示される大きさに対して画像データが大きすぎないか
- 同じ内容を伝える画像がページ内で重複していないか
- 画像が読み込まれない場合でも、本文だけで最低限の意味が伝わるか
4. コントラストと視認性を確保する
画像内の文字や重要な要素が背景に埋もれていると、内容を読み取りにくくなります。特に、薄い文字色、背景と近い色、細すぎる文字、写真の上に置いたテキストは注意が必要です。
読みやすい画像にするには、文字と背景の差をはっきりさせ、重要な要素を小さくしすぎないことが基本です。画像の中に説明文を入れる場合も、できるだけ本文側にも同じ要点を置くと、画像を見にくい人にも内容が伝わりやすくなります。
避けたい例
- 背景写真の上に、細く淡い文字を重ねる
- 色の違いだけで重要度や状態を伝える
- スマートフォン表示で読めないほど小さな文字を画像に入れる
5. 装飾画像と情報画像を分けて考える
すべての画像に詳しい説明が必要なわけではありません。ページの雰囲気づくりだけを目的にした装飾画像は、スクリーンリーダーで読み上げると、かえって読者の理解を妨げることがあります。一方で、商品内容、操作方法、比較結果、場所、注意事項などを伝える画像には、代替テキストや本文での説明が必要です。
迷ったときは、その画像をページから外した場合に読者の理解が変わるかを考えます。理解が変わるなら情報画像です。理解が変わらず、見た目を整えるだけなら装飾画像として扱えます。画像、動画、その他の非テキスト情報の扱いを広く確認したい場合は、非テキスト情報への配慮も参考になります。
画像を公開する前のチェックリスト
- 情報を伝える画像に、ページの文脈に合った代替テキストがある
- 複雑な図やグラフの要点を、本文でも説明している
- 装飾画像を、不要に読み上げさせない設定にしている
- 画像内の文字や重要な要素が背景と十分に区別できる
- 画像のファイルサイズが大きすぎず、ページを重くしていない
- 画像が表示されなくても、本文だけで主要な情報を理解できる
まとめ
画像はWebページをわかりやすくする一方で、使い方を誤ると情報の伝わり方に差が出ます。大切なのは、画像を見られる人だけに向けて作るのではなく、代替テキスト、本文説明、読みやすい見た目、軽いデータを組み合わせて、画像の役割を多くの読者に届けることです。
まずは、情報を伝える画像と装飾画像を分けることから始めます。そのうえで、必要な画像には意味が伝わる代替テキストを付け、複雑な内容は本文で補足します。これだけでも、画像のアクセシビリティは大きく改善しやすくなります。
当社では、Webアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。アクセシビリティ向上に関心がある方は、ぜひ詳細をご覧ください。