Shopify ADA コンプライアンス チェックリスト (2026)

アメリカ障害者法にはウェブサイトについては言及されていません。この本は、ほとんどの人が電子メールを使用する前の 1990 年に書かれました。しかし、裁判所は一貫して、ADA タイトル III であるとの判決を下しています。これは「公共の宿泊施設」における差別を禁止するもので、eコマースストアにも適用され、Shopifyの加盟店がこの件で訴訟を起こされるケースが増えている。米国でオンライン販売を行う場合、これは仮定のリスクではありません。

これは、Shopify ストアのアクセシビリティを監査するときに使用するチェックリストです。これで完全に防げるわけではありませんが（何も効果はありません）、原告側の弁護士が最初に探している溝を埋めることにはなります。

ADA が実際に要求するもの (正式な基準はありません)

ここが人々をつまずかせる部分です。ADA 自体が Web サイトの技術標準に名前を付けていないのです。議会はインターネットに関する法律を更新することはなく、司法省は特定の規則を正式に採用することなくタイトル III がオンライン ストアに適用されると述べています。

実際には、そのギャップは次によって埋められます。 WCAG (Web コンテンツ アクセシビリティ ガイドライン) 2.1 または 2.2、レベル AA。これは法律ではありませんが、和解合意書、司法省の指導書、裁判所の判決で何度も参照されているものです。あなたのストアが WCAG 2.2 AA を満たしていれば、訴訟のすべての当事者 (原告、被告、裁判官) があなたを評価する基準に沿っていることになります。

始める前に知っておく価値のあることがさらに 2 つあります。

• EU のアクセシビリティ法は個別に施行可能になりました （2025 年 6 月以降）EU に販売する企業向けであり、独自の要件が WCAG に大まかにマッピングされています。ヨーロッパの顧客に発送する場合、このチェックリストはほぼ同じ内容をカバーします。
• コンプライアンスは二元的なものではありません。 運転免許試験に合格するように、ADA に「合格」するわけではありません。実際の障壁を修正することで露出を減らし、さらに多くの障壁を見つけるたびにそれを減らし続けます。

Shopify ADA コンプライアンス チェックリスト

これらを順番に実行してください。専門ツールを使用しない場合でも、各セクションを手動でチェックするには数分かかります。

1. 画像とメディア

• すべての製品画像には説明的な代替テキストが付いています。「IMG_2481.jpg」ではなく、有用な詳細を示さずに繰り返される製品タイトルでもなく、目の見えない買い物客が行動できる説明です (「ネイビー ウールのクルーネック セーター、折り畳まれ、グレーの背景」)。
• 装飾画像 (背景テクスチャ、スペーサー) には空の alt 属性 (alt="") そのため、スクリーン リーダーはファイル名を読み上げる代わりに、ファイル名をスキップします。
• サイト上のすべてのビデオにはキャプションが付いています。すべての音声にはトランスクリプトが付いています。

2. 色とコントラスト

• 本文の背景に対するコントラスト比は少なくとも 4.5:1 です。大きなテキスト (18 ポイント以上) には 3:1 が必要です。無料のコントラスト チェッカー ツールを使用すると、テーマのカラー パレットに対して数秒でこれを確認できます。
• セールバッジ、「売り切れ」ラベル、フォームエラーは色だけに依存しません。赤い「在庫切れ」ラベルには「在庫切れ」という単語も必要です。色覚異常のユーザーは赤と緑を区別できません。
• フォームフィールドのプレースホルダーテキストだけがラベルではありません。プレースホルダのテキストはフィールドに入力されると消え、コントラスト要件を完全に満たさないことがよくあります。

3. キーボードナビゲーション

• すべてのインタラクティブな要素 (ナビゲーション リンク、フィルター、「カートに追加」、数量セレクター、カート ドロワー、チェックアウト フィールド) は、マウスを使用せず、Tab キーと Enter キーのみを使用してアクセスおよび操作できます。
• 焦点が見える。 Tab キーを押してボタンまたはリンクに移動すると、現在地が明確に視覚的に示されます。多くのテーマでは、美観のためにこれを取り除いています。 outline: none そして決して交換しないでください。
• モーダルとカート ドロワーはフォーカスを正しくトラップし (開いているモーダル内でタブが循環し、その後ろに隠れているページ コンテンツに移動するのではありません)、Escape でそれらを閉じます。

4. フォームとチェックアウト

• すべての入力には、 <label> 視覚的に近くに配置されるだけでなく、プログラム的に関連付けられます。フィールドがフォーカスを受け取ると、スクリーン リーダーがラベルを読み上げます。接続がなければ、有益なことは何も発表されません。
• エラー メッセージは具体的であり (「有効な郵便番号を入力してください」)、赤色のテキストで表示されるだけでなく、表示されたときにスクリーン リーダーに通知されます。
• チェックアウト作業はキーボードとスクリーン リーダーで開始して終了します。これは、テストすべき単一の最も価値の高いフローです。これは収益にも重要なため、ここでのバグは、訴訟につながる前に、売上を犠牲にします。

5. 構造とセマンティクス

• 見出しは、視覚的なサイズ変更のためにレベルをスキップするのではなく、論理的な順序 (1 つの H1、次に H2、次に右側の H2 の下にネストされた H3) に従います。
• ランドマーク領域 (ヘッダー、ナビゲーション、メイン、フッター) が存在するため、スクリーン リーダーのユーザーは、ページ全体を上から下まで聞くのではなく、セクション間を移動できます。
• リンクにはリンク先が説明されています (「ここをクリック」ではなく「返品ポリシーを表示」がページ上で 6 回繰り返されます)。

6. サードパーティ製アプリ

これは、ほとんどの Shopify 販売者が見逃しているカテゴリです。テーマはきれいかもしれませんが、App Store からインストールしたレビュー ウィジェット、アップセル ポップアップ、チャット バブル、カウントダウン タイマーはきれいではないことが多く、すべてのページに読み込まれます。インストールされている各アプリを個別に監査します。ポップアップが 1 つ壊れるだけで、他のすべてが元に戻されてしまう可能性があります。

7. モバイルタッチターゲット

• モバイルではボタンとリンクは少なくとも 44 × 44 ピクセルであり、細かい運動制御が制限されているユーザーが間違ったボタンをタップしない程度の十分な間隔が確保されています。

ストアをテストする方法

手動レビューは自動化ツールが見逃しているものを発見し、自動化ツールは手動レビューが見逃しているものを発見します。両方を使用します。

1. まず自動スキャンを実行します。 私たちの 無料の AccessScan ツール axe-core を使用してホームページ、製品ページ、カートを WCAG 2.2 A/AA ルールに照らしてチェックし、重大度ランク付けされた問題に約 1 分でフラグを立てます。これは本当に有用な出発点です。ただし、自動テストでは通常、実際の障壁の 30 ～ 40% しか検出できないため、クリーンなスキャンをゴールラインではなくフロアとして扱います。
2. キーボードだけを使って自分のサイトをナビゲートします。 10 分間マウスのプラグを抜き、何かを購入してみます。
3. スクリーン リーダーを使用してスポット チェックを行います。 VoiceOver はすべての Mac および iPhone に無料で付属しています。 NVDA は Windows では無料です。流暢である必要はありません。ホームページを 5 分閲覧してチェックアウトすれば、明らかな問題がすぐに表面化します。
4. テーマまたはアプリを更新するたびに再テストしてください。 アクセシビリティは 1 回限りのプロジェクトではありません。テーマの更新や新しいアプリによって、すでに修正した問題がサイレントに再発生する可能性があります。

アクセシビリティ ウィジェットに関する簡単な警告

Shopify App Store には、単一のスクリプト インストールによる即時の ADA 準拠を約束するアプリが表示されます。通常は、サイトの隅に表示調整のメニューが表示された小さなアクセシビリティ アイコンが表示されます。これらはオーバーレイ ウィジェットと呼ばれますが、訴訟を確実に防止できるわけではありません。完全な内訳を書きました アクセシビリティ オーバーレイ ウィジェットが市販されている方法では機能しない理由、上記のチェックリストを実行する代わりに、インストールする前に読む価値があります。

実際の修復にはどのくらいの費用がかかりますか

それは、あなたの店舗が現在どのくらい離れているかによって決まります。クリーンでモダンなテーマといくつかの不正動作するアプリを備えたストアでは、フォームのラベル付け、コントラストの修正、アプリの監査など、開発者に集中して数日間の時間を費やす必要があるかもしれません。カスタム Liquid コードに組み込まれた多数のアクセシビリティ ギャップを備えた、大幅にカスタマイズされた古いテーマに基づいて構築されたストアは、より大規模なプロジェクトであり、部分的なテーマの再構築に近いものになります。

いずれにせよ、訴訟よりも修正の方が安価です。 ADA の Web アクセシビリティに関する申し立てに対する法的弁護および和解費用は、根本的な修正に開発者が 1 週間かかる場合でも、日常的に 5 桁に達します。範囲を絞った見積もりが必要な場合は、 Devmerx は、提供するすべてのテーマと移行にアクセシビリティを組み込みます すでに店舗をお持ちの場合は、修復作業を別途お見積りいたします。

よくある質問

Shopify ADAはそのまま使用しても準拠していますか?

Shopify を含め、デフォルトで「ADA 準拠」のプラットフォームはありません。 Shopify のチェックアウトとコア管理者はアクセシビリティに関する作業を行っていますが、テーマ、コンテンツ、インストールするすべてのアプリはあなたの責任です。デフォルトの Shopify テーマでは、上記のチェックリストを特定のストアに適用する必要があります。

WCAG 2.2 AA に参加すると、訴えられないことが保証されますか?

いいえ。WCAG に準拠するとリスクが大幅に軽減され、クレームが届いた場合に強力な法的立場が得られますが、法的保証となる技術標準はありません。サイトがどの程度準拠しているかに関係なく、一部の主張はご都合主義です。 WCAG 準拠によって行われるのは、そもそもサイトをターゲットにしやすい、簡単で明白な違反を削除することです。

アクセシビリティに関する声明ページは必要ですか?

これは法的に義務付けられているわけではありませんが、良い習慣です。アクセシビリティへの取り組みを表明し、対象とする標準 (WCAG 2.2 AA) をリストし、障壁を報告するための連絡方法を示す短いページは誠意を示し、ユーザーに訴訟以外のチャネルを提供します。

どのくらいの頻度でアクセシビリティを再確認する必要がありますか?

少なくとも、すべてのテーマの更新、すべての新しいアプリのインストール、およびすべての主要なコンテンツのプッシュ (新しいコレクション ページ、新しいランディング ページ) の後。多くの店舗では、明らかな変化がない場合でもフル スキャンを実行するよう四半期ごとにリマインダーを設定しています。

アクセシビリティの問題を解決するとストアの速度が遅くなりますか?

一般的にはその逆です。セマンティック HTML、クリーンなマークアップ、肥大化したサードパーティ スクリプトの削減 (アクセシビリティを向上させる同じ修正) により、ページ速度も向上する傾向があります。 2 つの目標が矛盾することはほとんどありません。