WCAG 2.2 AAチェックリスト：ECサイトのウェブアクセシビリティ対応

Shopify・WooCommerceのECサイト向けWCAG 2.2 AAチェックリスト。代替テキスト、コントラスト、ラベル、キーボード操作、フォーカス、ターゲットサイズ、2.2の新しい達成基準をページ種別ごとに確認できます。

FixReports 編集部2分で読めます

ECサイトのWCAG 2.2 AAチェックリストは、ほとんどのストアテンプレートで見つかる不適合の確認から始まります。代替テキストの欠落、コントラスト不足のテキスト、アクセシブルな名前のないリンクやボタン、ラベルのないフォーム項目、キーボードトラップ、見えないフォーカスです。そのうえでWCAG 2.2は、ECサイトに大きく影響するAAの確認項目を追加しています。固定バーの下に隠れてしまうフォーカス中の要素（2.4.11）、24 × 24 CSSピクセルより小さいタップターゲット（2.5.8）、何かを記憶したり書き写したりさせるログイン（3.3.8）です。ページ種別（トップページ、コレクション、商品、カート）ごとにキーボードと自動チェックツールでテストし、テーマのテンプレートを修正すれば、すべてのページに修正が反映されます。

要点

  • WCAG 2.2は2023年10月5日にW3C勧告となりました。現行版の日付は2024年12月12日で、ISO/IEC 40500:2025 （新しいタブで開きます）として承認されています。
  • WebAIM Million 2026 （新しいタブで開きます）（2026年2月のデータ）では、上位100万サイトのトップページの95.9%で、検出可能なWCAG 2の不適合が見つかりました。
  • 最も多かった6つの不適合は、低コントラストのテキスト（ページの83.9%）、代替テキストの欠落（53.1%）、フォームラベルの欠落（51%）、空のリンク（46.3%）、空のボタン（30.6%）、ページの言語指定の欠落（13.5%）でした。
  • この調査対象に含まれる42,516件のShopifyのトップページでは、検出されたエラーが平均75.1件で、全ページ平均の56.1件を上回りました。
  • WCAG 2.2では、AAの達成基準が4つ（2.4.11、2.5.7、2.5.8、3.3.8）、レベルAの達成基準が2つ（3.2.6、3.3.7）追加され、4.1.1 構文解析が削除されました。

WCAG 2.2では、ECサイトにとって何が変わりましたか？

WCAG 2.2では9つの達成基準が追加され、そのうち6つがレベルAまたはAAです。また、4.1.1 構文解析は不要になったとして削除されました（W3C WAI （新しいタブで開きます））。

新しい達成基準レベルECサイトでの意味
2.4.11 隠されないフォーカス（最低限）AAフォーカスされたリンクやボタンが、固定ヘッダー、固定表示の「カートに追加」バー、Cookieバナー、チャットウィジェットで完全に隠れてはいけません
2.5.7 ドラッグ動作AA価格帯スライダーのようにドラッグが必要な操作には、1回のタップで操作できる代替手段が必要です
2.5.8 ターゲットのサイズ（最低限）AAクリックやタップのターゲットは24 × 24 CSSピクセル以上にするか、各ターゲットの周りに描いた24 pxの円が隣のターゲットに触れない間隔を空けます
3.2.6 一貫したヘルプAヘルプへのリンク、連絡先、チャットを、すべてのページで同じ相対的な順序で表示します
3.3.7 冗長な入力項目A1つの手続きの中で同じ情報を2回求めず、自動入力するか、選択できるようにします
3.3.8 アクセシブルな認証（最低限）AA代替手段や、貼り付け・パスワードマネージャーといった支援手段がない限り、ログインを記憶や書き写しに頼らせてはいけません

残りの3つ（2.4.12、2.4.13、3.3.9）はレベルAAAです。2.2は4.1.1を除く2.1のすべての達成基準を引き継いでいるため、2.2のAAを満たせば2.1のAAも満たします。

ストアのテンプレートで不適合になりやすいWCAGの達成基準はどれですか？

毎年、同じいくつかの項目が上位に並びます。コントラスト、代替テキスト、フォームラベル、リンクやボタンの名前、そして自動ツールでは一部しか検出できないキーボードとフォーカスの問題です。

達成基準ECサイトでよくある不適合修正方法
1.1.1 非テキストコンテンツ（A）代替テキストがない、またはファイル名が代替テキストになっている商品画像。テキストのないリンク画像写っている商品（色、スタイル、アングル）を説明します。alt=""は装飾画像にだけ使います。Shopifyテーマではimage.altを出力するようにします
1.4.3 コントラスト（最低限）（AA）薄いグレーの本文、プレースホルダーテキスト、セールバッジ、ヒーロー画像に重ねたテキスト通常のテキストは4.5:1、大きなテキスト（約24 px、または太字で18.5 px）は3:1（W3C （新しいタブで開きます））
2.4.4 リンクの目的（文脈内）（A）、4.1.2 名前（name）・役割（role）・値（value）（A）アイコンだけのカート、検索、SNSのリンク。スライダーの矢印。名前のない「X」の閉じるボタン各操作要素に、見えるテキストかaria-label（例：「カート、2点」）を付けます
1.3.1 情報及び関係性（A）、3.3.2 ラベル又は指示（A）プレースホルダーテキストしかないメルマガ登録欄や検索欄。ラベルのない数量入力欄入力欄のidと一致する<label for>を使い、ラジオボタン形式のスウォッチはlegend付きのfieldsetでグループ化します
2.1.1 キーボード（A）、2.1.2 キーボードトラップなし（A）ホバーでしか開かないメニュー、divで作られたスウォッチ、キーボードで閉じられないポップアップ本来のbutton要素とa要素を使い、Escapeキーでオーバーレイを閉じてフォーカスを元の位置に戻します
2.4.7 フォーカスの可視化（AA）テーマCSSのoutline: none背景に対してはっきり目立つ:focus-visibleのスタイルを追加します

WebAIMの調査では、リンク画像の4つに1つに代替テキストがなく、代替テキストのない画像の45%がリンクでした（WebAIM （新しいタブで開きます））。コレクションの商品一覧では、たいてい商品画像のリンクがこれにあたります。

トップページでは何を確認すべきですか？

ヘッダー、ヒーローエリア、ポップアップで表示されるものを確認します。すべての訪問者が最初に目にする部分だからです。

  • スキップリンク：最初にフォーカスできる要素として、「コンテンツへスキップ」リンクを置きます（2.4.1 ブロックのバイパス、A）。
  • ヘッダーのアイコン：検索、アカウント、カートのアイコンにアクセシブルな名前があり、カートの名前に商品点数が含まれています。
  • メニュー：EnterキーまたはSpaceキーで開き、サブ項目にTabキーで移動でき、Escapeキーで閉じ、ホバーに依存しません（2.1.1）。Shopifyのテーマストアの要件 （新しいタブで開きます）では、ドロップダウンメニューを含め、ページのすべての部分がキーボードで操作できなければならないとされています。
  • ヒーロースライダー：スライドが5秒を超えて自動で切り替わる場合は、一時停止の操作を用意します（2.2.2 一時停止・停止・非表示、A）。
  • お知らせバーと画像上のテキスト：コントラストを測定します。ブランドカラーは4.5:1を満たさないことがよくあります。
  • ポップアップとCookieバナー：フォーカスをポップアップ内に移し、メールアドレス欄にラベルを付け、Escapeキーで閉じられるようにし、固定バナーがフォーカス中の要素を完全に覆わないようにします（2.4.11）。W3Cは、フォーカスされた要素を固定バーにかぶらないようにする方法の1つとして、CSSのscroll-paddingを挙げています（W3C （新しいタブで開きます））。
  • ページの言語：html要素に正しいlang属性があります（3.1.1 ページの言語、A）。

コレクションページでは何を確認すべきですか？

コレクションページでは、たいてい商品カード、絞り込みフィルター、スウォッチで不適合が起きます。

  • 商品カード：画像リンクに代替テキストがあるか、画像を支援技術から隠したうえで、タイトルのリンクが名前を担っています。
  • フィルター：すべてのチェックボックスにラベルがあり、各グループに見出しまたはlegendがあります。フィルターのドロワーは、キーボードで開く、操作する、閉じるのすべてができます。更新された件数はステータスメッセージとして読み上げられるようにします（4.1.3 ステータスメッセージ、AA）。
  • 価格スライダー：最低価格と最高価格の数値入力欄を追加し、ドラッグなし（2.5.7）でも、マウスなし（2.1.1）でもフィルターを使えるようにします。
  • カラースウォッチ：各スウォッチにテキストの名前があり、「売り切れ」を色だけで示していません（1.4.1 色の用途、A）。スウォッチは24 × 24 CSSピクセルを満たすか、間隔のルールを満たします（2.5.8）。
  • 並べ替えとページ送り：並べ替えのドロップダウンにラベルがあり、ページリンクや「もっと見る」ボタンがターゲットのサイズを満たしています。

商品ページでは何を確認すべきですか？

商品ページは購入の決め手となるページです。写真から「カートに追加」ボタンまでの間にある、すべての操作要素をテストします。

  • ギャラリー：各画像に代替テキストがあり、サムネイルは「画像2を表示」のような名前を持つボタンで、矢印はドラッグなしで操作できます（2.5.7）。
  • バリエーションの選択：サイズや色の選択肢はラベル付きのグループにまとめられ（1.3.1）、選択中の項目がスクリーンリーダーに伝わり（4.1.2）、在庫のないサイズはテキストで示されています。
  • 数量：入力欄にラベルがあり、マイナスとプラスのボタンに名前があって、2.5.8を満たしています。Shopifyのテーマストアは現在、24 × 24 CSSピクセル以上のタッチターゲットを求めており、Shopifyのアクセシビリティのベストプラクティス （新しいタブで開きます）では、主要な操作要素に44 × 44を推奨しています。
  • カートに追加：成功とエラーのメッセージが読み上げられます（4.1.3）。FTC（米連邦取引委員会）がオーバーレイ製品のベンダーに対して出した申立書には、商品がカートに追加されたことをスクリーンリーダーが読み上げず、5つ星の評価画像が「previous」ボタンとして読み上げられたサイトの例が挙げられています（FTCの申立書 （新しいタブで開きます））。
  • 評価、タブ、アコーディオン：評価には「5つ星中4.5」のようなテキストがあります。アコーディオンは、展開されているかどうかを伝えます。
  • 固定表示の「カートに追加」バー：キーボード利用者がTabキーでページを下へ移動していく間、フォーカス中の要素を完全に覆ってはいけません（2.4.11）。
  • 動画：音声を含む商品動画にはキャプションを付けます（1.2.2 キャプション（収録済み）、A）。

カートとログインでは何を確認すべきですか？

カートは、ほとんどのテーマが完全に制御できる最後のページです。チェックアウトボタンまでテストし、そのうえでアカウントへのログインが記憶や再入力に依存していないかを確認します。

  • カートドロワー：Shopifyのベストプラクティスに記載されているとおり、フォーカスがドロワー内に移り、開いている間はドロワー内にとどまり、Escapeキーで閉じるとカートボタンに戻ります。
  • カート内の商品：各数量入力欄に商品名のラベルがあり、各削除ボタンは「リネンシャツ（Mサイズ）を削除」のように、何を削除するのかを示します。
  • 割引コード欄と備考欄：ラベルがあり、エラーはテキストで説明されます（3.3.1 エラーの特定、A）。
  • チェックアウトボタン：Tabキーで到達でき、フォーカスが目に見え、固定要素の後ろに隠れていません。
  • ログイン（3.3.8）：Shopifyの顧客アカウントでは、デフォルトでワンタイムコードによるパスワード不要のログイン （新しいタブで開きます）が使われています。W3Cによると、コードは貼り付けまたは自動入力ができなければならず、貼り付けやパスワードマネージャーをブロックすると達成基準を満たしません。物体認識のCAPTCHAはAAで認められますが、パズルや計算問題のCAPTCHAには別の方法が必要です（W3C （新しいタブで開きます））。

ここではプラットフォームの違いが重要です。Shopifyでは、情報入力、配送、支払いの各ステップでcheckout.liquidがサポートされなくなった （新しいタブで開きます）ため、チェックアウトのマークアップの大半はテーマではなくShopifyが提供しています。追加したチェックアウトアプリやカスタマイズをテストしてください。WooCommerceでは、チェックアウトはWordPressサイト上の1ページです。WooCommerceは、コアのフロントエンドがWCAG 2.2 AAにおおむね適合している（substantially conformant）としています（声明の最終更新は2025年4月1日）が、テーマやプラグインによって適合が損なわれる可能性はあります（WooCommerce （新しいタブで開きます））。

このチェックリストでストアをどのようにテストすればよいですか？

ページ種別ごとに、自動スキャン、キーボードだけでの購入テスト、短時間のスクリーンリーダー確認を組み合わせます。

  1. 自動スキャン：axe、WAVE、Lighthouseなどのツールで、コントラスト、代替テキスト、ラベル、空のリンクを検出できます。Shopifyのテーマストアは、トップ、コレクション、商品の各ページで、Lighthouseのアクセシビリティスコアが平均90以上であることを求めています。これは最低ラインであって、適合を意味するものではありません。W3Cは、ツールだけではアクセシビリティを判定できない （新しいタブで開きます）としています。
  2. キーボードだけでの購入：マウスを使わずに、トップページからメニューか検索で商品にたどり着き、絞り込み、バリエーションを選び、カートに追加し、カートを開いてチェックアウトボタンまで進みます。
  3. スクリーンリーダーでのスポットチェック：VoiceOverやNVDAで、商品名、価格、バリエーションの状態、カート追加の確認メッセージを聞きます。
  4. 変更後の再テスト：テーマの更新や新しいアプリによって、修正が元に戻ることがあります。

当社の無料スキャンは、実際のChromiumとaxe-coreを使い、トップ、コレクション、商品、カート、コンテンツの各ページでステップ1を実施します。アクセシビリティ改善レポートは最大25ページをテストし、ステップ2としてチェックアウトボタンまでのキーボードだけでの購入テストを追加し、修正前と修正後のコードを示すほか、スクリーンリーダーを使って人が確認する必要があるステップ3のチェックリストも含みます。どちらも、ADAやWCAGへの準拠を保証するものではありません。

よくある質問

米国のECサイトにWCAG 2.2は法的に義務付けられていますか？

米司法省（Department of Justice）は、民間企業向けにウェブの基準を定めたADA（障害を持つアメリカ人法）の規則を設けておらず、同省の2022年のウェブガイダンス （新しいタブで開きます）は、WCAGを役立つ指針として挙げています。デマンドレター（要求書）ではWCAG 2.1または2.2のAAがよく引用されるため、自社の具体的な義務については弁護士に相談してください。

WCAG 2.2 AAを満たせば、WCAG 2.1 AAも満たしますか？

はい、実務上はそのとおりです。WCAG 2.2は、W3Cが不要になったとして削除した4.1.1 構文解析を除き、WCAG 2.1のすべての達成基準を引き継いでいます。

WCAG 2.2で求められるターゲットの最小サイズはどれくらいですか？

2.5.8では、ターゲットは24 × 24 CSSピクセル以上である必要があります。ただし、それより小さい各ターゲットを中心とする24 pxの円が、ほかのターゲットやその円に触れない場合は例外です。文中のリンク、スタイルを指定していないブラウザー標準の操作要素、その見せ方が不可欠なもの、基準を満たす同等の操作要素があるターゲットも適用除外です。

Lighthouseのアクセシビリティスコアが100なら、ストアは適合していますか？

いいえ。自動ツールが検出できるのは不適合の一部だけです。WebAIMも、エラーが検出されないことは、そのページがアクセシブルである、または適合していることを意味しないと指摘しています。

パスワードによるログインは3.3.8の不適合になりますか？

それだけでは不適合になりません。パスワード欄に貼り付けができ、パスワードマネージャーを使えれば達成基準を満たします。不適合になるのは、貼り付けや自動入力をブロックした場合です。

ストアはどのくらいの頻度で再テストすべきですか？

テーマの更新、新しいアプリの導入、テンプレートの大きな変更のたびに再テストし、購入までの流れも定期的にスポットチェックしてください。アプリは予告なく新しいマークアップを挿入することがあるためです。

出典

すべてのガイド