画像のアクセシビリティ - alt テキストの書き方とコントラスト比の基準
なぜ画像のアクセシビリティが重要なのか
Web 上の画像は視覚に依存するコンテンツであり、視覚障害のあるユーザーはスクリーンリーダーを通じて画像の内容を理解します。適切な代替テキスト (alt テキスト) がない画像は、これらのユーザーにとって「存在しないコンテンツ」と同じです。WHO の統計によると、世界で約 22 億人が何らかの視覚障害を持っており、Web アクセシビリティは少数派への配慮ではなく、大規模なユーザー層への対応です。
法的な観点からも、画像のアクセシビリティは重要性を増しています。日本では 2024 年 4 月に改正障害者差別解消法が施行され、民間事業者にも合理的配慮の提供が義務化されました。Web サイトのアクセシビリティ不備が「合理的配慮の不提供」と判断されるリスクがあります。米国では ADA (Americans with Disabilities Act) に基づく Web アクセシビリティ訴訟が年間数千件発生しています。
SEO の観点でも、alt テキストは画像検索のランキング要因です。Google の画像検索アルゴリズムは alt テキストを主要なシグナルとして使用しており、適切な alt テキストは画像検索からのトラフィック獲得に直結します。アクセシビリティと SEO は対立するものではなく、正しい alt テキストは両方の目的を同時に達成します。
alt テキストの基本ルールと記述パターン
alt テキストの記述には明確なルールがあります。WCAG 2.1 のガイドラインに基づく基本原則を理解し、画像の種類に応じた適切な記述パターンを使い分けましょう。
基本ルール:
- 画像が伝える情報を簡潔に記述する (目安: 125 文字以内)
- 「画像」「写真」「イラスト」などの接頭辞は不要 (スクリーンリーダーが自動的に「画像」と読み上げるため)
- 画像内のテキストは alt テキストに含める
- 周囲の文脈で既に説明されている情報を繰り返さない
画像の種類別パターン:
- 情報を伝える画像: 画像が伝える情報を記述する。例:
alt="2024 年の月別売上推移を示す棒グラフ。7 月が最高で 350 万円" - 機能を持つ画像 (リンク・ボタン): 画像の見た目ではなく、クリック時の動作を記述する。例:
alt="ホームページに戻る" - 装飾画像: 空の alt 属性 (
alt="") を設定し、スクリーンリーダーに無視させる - 複雑な画像 (グラフ・図表): alt テキストに概要を記述し、詳細は本文中または
longdescで提供する
alt 属性自体を省略する (<img src="...">) のと、空の alt を設定する (<img src="..." alt="">) は全く異なります。前者はスクリーンリーダーがファイル名を読み上げてしまい、ユーザー体験を著しく損ないます。装飾画像でも必ず alt="" を明示的に設定してください。
コンテキストに応じた alt テキストの最適化
同じ画像でも、使用されるコンテキスト (文脈) によって最適な alt テキストは異なります。画像が「何を伝えるために配置されているか」を考え、その目的に合った記述をすることが重要です。
例えば、犬の写真が使われる場面を考えてみましょう:
- ペットショップのサイト:
alt="ゴールデンレトリバーの子犬、生後 3 ヶ月、オス"- 商品情報として犬種・月齢・性別が重要 - 動物病院のブログ:
alt="予防接種を受けるゴールデンレトリバー"- 記事の文脈 (予防接種) に関連する情報が重要 - デザインブログの装飾:
alt=""- 記事内容と無関係な装飾画像のため空にする
EC サイトの商品画像では、商品名だけでなく色・サイズ・素材など、購買判断に必要な視覚情報を含めます。「赤いドレス」ではなく「ワインレッドのシルクロングドレス、V ネック、膝下丈」のように具体的に記述することで、視覚障害のあるユーザーも商品を正確にイメージできます。
グラフや図表の場合、alt テキストだけでは情報を十分に伝えられないことがあります。その場合は aria-describedby 属性で詳細な説明テキストを関連付けるか、図表の直後にデータテーブルを配置して同等の情報をテキストで提供します。
画像のコントラスト比と WCAG 基準
画像内のテキストや重要な視覚要素には、十分なコントラスト比が求められます。WCAG 2.1 では、テキストのコントラスト比について以下の基準を定めています:
- レベル AA (最低基準): 通常テキスト 4.5:1 以上、大きなテキスト (18pt 以上、または 14pt 太字以上) 3:1 以上
- レベル AAA (推奨基準): 通常テキスト 7:1 以上、大きなテキスト 4.5:1 以上
これらの基準は HTML テキストだけでなく、画像内に含まれるテキストにも適用されます。バナー画像、インフォグラフィック、OGP 画像などに含まれるテキストが背景とのコントラスト不足で読みにくい場合、アクセシビリティ基準を満たしません。
WCAG 2.1 の「非テキストコントラスト」(達成基準 1.4.11) では、UI コンポーネントや意味のあるグラフィック要素にも 3:1 以上のコントラスト比が求められます。例えば、グラフの線や棒、アイコン、フォームの境界線などが対象です。
コントラスト比の検証ツール:
- WebAIM Contrast Checker: 2 色を入力してコントラスト比を計算する Web ツール
- Stark (Figma プラグイン): デザイン段階でコントラスト比を確認できる
- axe DevTools (ブラウザ拡張): ページ全体のアクセシビリティ問題を自動検出する
装飾画像と背景画像の適切な処理
すべての画像に alt テキストが必要なわけではありません。純粋に装飾目的の画像は、スクリーンリーダーに無視させることで、ユーザーの情報過多を防ぎます。装飾画像の判断基準は「この画像を削除しても、ページの情報や機能が損なわれないか」です。
装飾画像の処理方法:
<img>タグの場合:alt=""を設定し、さらにrole="presentation"またはaria-hidden="true"を追加する- CSS 背景画像の場合: そもそも DOM に存在しないため、スクリーンリーダーは認識しない。装飾画像は可能な限り CSS
background-imageで実装するのが最もクリーンな方法 - SVG アイコンの場合:
aria-hidden="true"を設定し、隣接するテキストラベルで機能を伝える
判断に迷うケースとして、「雰囲気を伝える写真」があります。例えば、カフェの紹介ページに掲載された店内写真は装飾ではなく情報です。「木目調のカウンターと暖色の照明が特徴的な落ち着いた店内」のように、その写真が伝える雰囲気を言語化して alt テキストに設定します。
アイコンフォント (Font Awesome など) を使用する場合も注意が必要です。アイコンが単独で意味を持つ場合 (例: ゴミ箱アイコンの削除ボタン) は、aria-label="削除" を設定します。テキストラベルと併用する場合は aria-hidden="true" でアイコンを隠し、テキストだけをスクリーンリーダーに読ませます。
画像アクセシビリティの自動テストと継続的改善
画像のアクセシビリティを手動で確認し続けるのは現実的ではありません。自動テストツールを CI/CD パイプラインに組み込み、問題を早期に検出する仕組みを構築しましょう。
自動テストで検出できる問題:
- alt 属性が欠落している
<img>タグ - alt テキストが空でない装飾画像 (過剰な alt)
- alt テキストにファイル名やパスが含まれている (例:
alt="IMG_2034.jpg") - 画像内テキストのコントラスト比不足
role="img"を持つ要素にaria-labelがない
推奨ツール:
axe-core: JavaScript で動作するアクセシビリティテストエンジン。Jest や Playwright と統合してユニットテスト・ E2E テストに組み込めるpa11y: コマンドラインから実行できるアクセシビリティテストツール。CI で定期実行し、レポートを生成する- Lighthouse CI: Google の Lighthouse を CI で実行し、アクセシビリティスコアの閾値を設定して品質ゲートとする
自動テストでは検出できない問題もあります。alt テキストの「質」(適切な記述かどうか) は人間の判断が必要です。定期的なアクセシビリティレビューを実施し、スクリーンリーダーで実際にページを操作して、画像の情報が正しく伝わるかを確認することが重要です。VoiceOver (macOS/iOS) や NVDA (Windows) を使った実機テストを、リリース前のチェックリストに含めましょう。