なぜECサイトでアクセシビリティが重要か

日本の障害者手帳保有者は約1,160万人。さらに高齢者や一時的な障害を持つ方を含めると、Webサイトの利用に何らかの困難を感じるユーザーは人口の20%以上にのぼります。

ECサイトにとって、これは売上の20%を取りこぼしている可能性を意味します。

アクセシビリティ対応は「やさしさ」ではなく「ビジネス判断」です。海外では、Webアクセシビリティ訴訟が年間4,000件を超えており（米国2024年）、日本でも今後増加が見込まれます。

WCAG 2.2 レベルA/AA — ECサイトで優先すべき項目

WCAG（Web Content Accessibility Guidelines）は、W3Cが策定するWebアクセシビリティの国際基準です。以下にECサイトで特に影響が大きい項目を優先度順に解説します。

P0 画像のalt属性

優先度：最高 すべての商品画像にalt属性を設定してください。 スクリーンリーダー利用者にとって、alt属性は商品を「見る」唯一の手段です。
  • 商品メイン画像: alt="ブランド名 商品名 カラー" のように具体的に記述
  • 装飾画像（背景パターン等）: alt="" で空にする（読み上げをスキップ）
  • バナー画像: バナー内テキストをaltにそのまま記載
NGパターン: alt="商品画像", alt="img001.jpg", alt属性自体がない

P0 フォームのラベル紐付け

優先度：最高

購入フォーム（住所・氏名・カード情報）のすべての入力欄に、が正しく紐付けられているか確認してください。

ラベルがないフォームはスクリーンリーダーで「テキスト入力」としか読み上げられず、何を入力すべきか分かりません。ECサイトの購入フォームでこれが起きるとカートからの離脱に直結します。

確認方法

  • 開発者ツールで各に対応するのfor属性が一致しているか確認
  • をクリックした時に対応するラベルテキストが読み上げられるかVoiceOverで確認
  • PagePulseの「Accessibility」カテゴリで自動チェック可能

P0 色コントラスト比

優先度：最高

テキストと背景のコントラスト比がWCAG AA基準を満たしているか確認してください。

  • 通常テキスト（18px未満）: コントラスト比 4.5:1 以上
  • 大テキスト（18px以上または14px太字）: コントラスト比 3:1 以上
  • UIコンポーネント（ボタン・入力欄の境界線）: 3:1 以上

ECサイトで見落としやすいのは「SALE」バッジの赤文字×白背景（コントラスト比2.7:1で不合格）や、フォームのプレースホルダーテキストです。

P1 キーボードナビゲーション

優先度：高

マウスを使わずにTabキーだけで以下の操作ができるか確認してください：

  • 商品一覧 → 商品詳細ページへの遷移
  • 数量選択 → カートに追加
  • カート内の商品削除
  • 購入手続きの全フォーム入力 → 注文確定
フォーカスインジケーター（現在選択中の要素を示す枠線）が見えるかも重要です。outline: none をCSSで一律指定しているサイトが非常に多いですが、代わりの視覚的手がかりを必ず提供してください。

P1 見出し構造の階層

優先度：高

ページ内の見出しが正しい階層（h1 → h2 → h3）になっているか確認してください。スクリーンリーダー利用者は見出しジャンプでページを移動するため、階層が飛んでいると（h1 → h3）ナビゲーションが困難になります。

  • 商品ページ: h1は商品名、h2はスペック・レビュー・関連商品などのセクション
  • カテゴリページ: h1はカテゴリ名、h2は各商品名（ではなくサブカテゴリ）

P2 ARIAランドマークの設定

優先度：中

HTML5のセマンティック要素（

,

ECサイト特有のアクセシビリティ課題

モーダル・ポップアップの制御

「会員登録で10%OFF」のモーダルは、キーボードユーザーにとって大きな障壁になります。

カートの動的更新

JavaScriptでカート内容が更新された際（商品追加・削除・数量変更）、スクリーンリーダーに変更を通知するaria-live="polite"の設定が必要です。視覚的にはカートアイコンの数字が変わるだけでも、非視覚ユーザーには変更が伝わりません。

在庫・SALE表示

色だけで在庫状態やセール対象を伝えるのはNGです（色覚異常のユーザーに伝わらない）。テキストラベル（「在庫なし」「SALE 30%OFF」）を必ず併記してください。

対応の優先順序

アクセシビリティ対応を一度にすべて完璧にする必要はありません。以下の優先順位で進めてください：

PagePulseの「Accessibility」カテゴリは、上記のP0項目を含む主要チェック項目をワンクリックで自動検出します。まずは現状のスコアを確認し、改善すべき箇所を把握することから始めてください。