accessibility-commerce

Eコマースのアクセシビリティ

概要

WCAG 2.1 レベル AA への準拠には、カートの動的な更新をスクリーンリーダーで読み上げること、インタラクティブなコンポーネント（カルーセル、数量ステッパー、モーダル）のキーボード操作、フォーカス管理、色のコントラスト要件が含まれます。アクセシビリティに配慮したストアは、ADA、AODA、EAA に基づく法的リスクを軽減し、一般にあらゆるユーザーでコンバージョン率が向上します。

このスキルを使う場面

• アクセシビリティ監査で、法令遵守（ADA、AODA、EAA）を妨げる WCAG 違反が見つかった場合
• スクリーンリーダーのユーザーから、購入を完了できないという報告があった場合
• キーボードだけを使うユーザーがチェックアウトのフローを操作できない場合
• 自動テストツール（axe、WAVE）で、修正が必要な重大な問題が検出された場合
• 新しいストアフロントを構築し、最初からアクセシビリティを組み込む場合

主な手順

Step 1: マーチャントのプラットフォームを特定し、適切な方法を選択する

プラットフォーム	推奨する方法	理由
Shopify	Theme Store から WCAG 準拠のテーマ（Dawn、Sense）を使用し、自動オーバーレイ用の AccessiBe または EqualWeb アプリをインストールします。カスタム修正には Liquid を編集します	Shopify の組み込みテーマではアクセシビリティが大幅に改善されています。テーマエディターと Liquid の編集で、ほとんどの問題に対応できます
WooCommerce	アクセシビリティに配慮したテーマ（Astra、Kadence）を選び、スキップリンク、ARIA ロール、フォームラベルを追加する無料の WP Accessibility プラグインをインストールします	WP Accessibility はコードを書かずに重要な修正を加えられます。Gutenberg ブロックにも、妥当なアクセシビリティ機能が組み込まれています
BigCommerce	最もアクセシビリティに優れた Cornerstone テーマを使用し、Theme Editor で組み込みのアクセシビリティチェッカーを有効にして、マーケットプレイスから ADA 対応アプリをインストールします	Cornerstone は、ほとんどの WCAG AA 要件に標準で対応しています
カスタム / ヘッドレス	Step 4 の手法を使って ARIA パターンを手動で実装し、NVDA+Firefox と VoiceOver+Safari でテストします	完全な制御には完全な責任が伴います。以下のコンポーネントパターンを使用してください

Step 2: アクセシビリティ監査を実施する

変更を加える前に、修正が必要な箇所を特定します。

1. 自動スキャン：axe DevTools のブラウザー拡張機能を使い、ホームページ、商品ページ、カート、チェックアウトをスキャンします
2. WAVE ツール：wave.webaim.org にアクセスし、ストアの URL をスキャンします
3. キーボードテスト：マウスを使わずに、チェックアウト全体を Tab キーで操作します。すべてのインタラクティブ要素に到達して操作できなければなりません
4. スクリーンリーダーテスト：VoiceOver（Mac/iOS）または NVDA（Windows/Firefox）でテストし、商品一覧を操作して購入を完了します

ほとんどのストアで見つかる一般的な問題：

• 意味のある代替テキストがない画像
• 色だけに頼った表示（例：テキストがなく、赤色だけで「在庫切れ」を示す）
• ラベルがないフォームフィールド
• フォーカスを閉じ込められず、Escape キーにも応答しないモーダル
• 成功をスクリーンリーダーに通知しないカート追加ボタン

Step 3: プラットフォームごとの修正

---

Shopify

テーマレベルの修正（コード不要）：

1. Online Store → Themes → Customize に移動します
2. すべての画像に代替テキストを設定します：Products → Media → Edit alt text
3. Theme settings → Typography で、本文のフォントサイズが 16px 以上であることを確認します
4. Header settings で Skip to content リンクを有効にします（Dawn とほとんどの最新テーマで利用できます）

カスタムテーマの Liquid コード修正：

カートの更新用に ARIA ライブリージョンを追加します。cart-notification.liquid または同等のスニペットを編集します：

<div aria-live="polite" aria-atomic="true" class="sr-only" id="cart-live-region">
  {{ cart.item_count }} items in cart
</div>

バリアント選択のカラースウォッチは、<fieldset> で囲み、<legend> を追加します：

<fieldset>
  <legend>{{ option.name }}: <span>{{ selected_value }}</span></legend>
  {% for value in option.values %}
    <label class="swatch {% if forloop.first %}selected{% endif %}">
      <input type="radio" name="{{ option.name }}" value="{{ value }}"
             {% if value == selected_value %}checked{% endif %} />
      <span class="sr-only">{{ value }}</span>
      <span class="swatch-color" style="background-color: {{ value | downcase }}" aria-hidden="true"></span>
    </label>
  {% endfor %}
</fieldset>

アプリの選択肢：

• AccessiBe（Shopify App Store、約 $49/月） — WCAG 2.1 AA 対応の自動オーバーレイです。テーマを編集せずに、スクリーンリーダー向けの調整とキーボード操作を追加します
• EqualWeb — 同様のオーバーレイ方式で、無料プランもあります

---

WooCommerce

プラグインによる修正：

1. WP Accessibility（無料、wordpress.org）をインストールします。スキップナビゲーションリンクとARIAランドマークを追加し、リンクのtitle属性を削除して、フォームラベルを修正します
2. Accessibility Suite for WooCommerceをインストールします。カートとチェックアウトの要素にARIAラベルを自動で追加します

テーマによる修正：

• AstraまたはKadenceテーマを使用します。どちらもWCAG AAへの優れた対応が組み込まれています
• Appearance → Customize → Typographyで、基本フォントサイズを最低16pxに設定します

WooCommerceのチェックアウトフィールドを手動で修正する方法 — 子テーマのfunctions.phpに追加します：

// Associate checkout field labels with inputs
add_filter('woocommerce_checkout_fields', function($fields) {
    foreach ($fields as $fieldset => &$fieldset_fields) {
        foreach ($fieldset_fields as $key => &$field) {
            if (!isset($field['label'])) {
                $field['label'] = ucfirst(str_replace('_', ' ', $key));
            }
        }
    }
    return $fields;
});

---

BigCommerce

1. まずCornerstoneテーマを使用します — BigCommerceの全テーマの中で、アクセシビリティの初期対応が最も優れています
2. Storefront → My Themes → Customizeに移動し、アクセシビリティ設定パネルを有効にします
3. 色のコントラストについては、Theme Editorで、白いテキストに対して十分なコントラストが得られるボタンの背景色を設定します（最小比率4.5:1）
4. オーバーレイ形式の修正には、BigCommerce App Marketplaceからアクセシビリティアプリをインストールします（「accessibility」で検索）

---

カスタム／ヘッドレス

React／Vue／Svelteのコンポーネントに、次のパターンを実装します。

カート更新用のARIAライブリージョン：

// Place once at the app root; update message after add-to-cart
export function CartLiveRegion({ message }) {
  return (
    <div role="status" aria-live="polite" aria-atomic="true"
         style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
      {message}
    </div>
  );
}

ラジオ入力を使用したアクセシブルなバリエーションセレクター：

<fieldset>
  <legend>Color: <strong>{selectedColor}</strong></legend>
  {colors.map(color => (
    <label key={color.value} className={`swatch ${!color.available ? 'unavailable' : ''}`}>
      <input type="radio" name="color" value={color.value}
             checked={selectedColor === color.value}
             disabled={!color.available}
             onChange={() => onColorChange(color.value)}
             className="sr-only" />
      <span className="swatch-visual" style={{ background: color.hex }} aria-hidden="true" />
      <span className="sr-only">{color.label}{!color.available ? ' (out of stock)' : ''}</span>
    </label>
  ))}
</fieldset>

モーダルのフォーカス管理 — フォーカストラップを自動的に処理するネイティブの<dialog>を使用します：

const dialogRef = useRef(null);
useEffect(() => {
  if (isOpen) dialogRef.current.showModal();
  else dialogRef.current.close();
}, [isOpen]);

return (
  <dialog ref={dialogRef} onClose={onClose}>
    {/* focus is automatically trapped inside <dialog> */}
    <button onClick={onClose} aria-label="Close">×</button>
    {children}
  </dialog>
);

視認可能なフォーカスインジケーター（アウトラインは削除しないでください）：

:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

ステップ4：検証とテスト

1. 変更後にaxeスキャンを再実行し、重大および深刻な違反が解決されていることを確認します
2. キーボード操作をテストします：Tab → すべてのインタラクティブ要素に移動できること、Enter／Space → ボタンが実行されること、Escape → モーダルが閉じること
3. VoiceOver（Mac）でテストします：Cmd + F5で有効にし、Tabと矢印キーで移動します。カートの更新が読み上げられることを確認します
4. WebAIM Contrast Checkerで色のコントラストを確認します。本文テキストには4.5:1、大きなテキストには3:1が必要です

ベストプラクティス

• フォーカスアウトラインは削除しないでください — マウスユーザーに対してのみ:focus:not(:focus-visible)で抑制し、キーボードユーザーには視認可能なフォーカスを残します
• まずセマンティックHTMLを使用します — アクションには<button>、ナビゲーションには<a>、表形式のデータには<table>を使用します。ARIA属性で非セマンティックなマークアップを修正することはできません
• 実際のスクリーンリーダーでテストします — 自動ツールで検出できるのは実際の問題の30～40％にすぎません。一般的な組み合わせはNVDA+FirefoxとVoiceOver+Safariです
• タッチターゲットは少なくとも44×44pxにします — マウス操作に困難のあるユーザーにも役立ちます
• 説明的なボタンテキストを記述します — 「カートに追加」は適切ですが、「ここをクリック」は適切ではありません。スクリーンリーダーのユーザーは、ボタンやリンクのテキストを使って移動します
• すべての商品動画にキャプションを付けます — 自動キャプションを出発点として使用しますが、商品名や価格が正確か確認してください

よくある落とし穴

問題	解決策
カート数のバッジが、文脈なしに「3」と読み上げられる	aria-label="3 items in cart"で囲むか、変更を文脈込みで読み上げるaria-live="polite"リージョンを使用します
カラースウォッチの選択が読み上げられない	<fieldset>/<legend>でスウォッチグループを囲み、<input type="radio">を使用します。div/spanのクリックハンドラーはスクリーンリーダーから認識できません
モーダルのフォーカストラップが機能しない	フォーカストラップが標準で備わっているネイティブの<dialog>要素（ブラウザー対応率96％以上）を使用します
フォームのエラーが読み上げられない	エラー概要にrole="alert"を追加するか、エラーのある各フィールドにaria-invalid="true"とaria-describedbyを追加します
オーバーレイ型アクセシビリティアプリが競合を引き起こす	オーバーレイアプリをインストールした後は十分にテストしてください。カスタムテーマのJavaScriptが壊れることがあります。インストールの前後にaxeで検証してください

関連スキル

• @responsive-storefront
• @checkout-flow-optimization
• @mega-menu-builder
• @search-autocomplete