アクセシビリティスキャナーがShopifyアプリの中で見落としているもの

この話はサポートの問い合わせから始まりました。マーチャントが自分のストアにアクセシビリティスキャナーをかけはじめ、当社に届いたレポートのいくつかは、テーマではなくCandy Rackのコードを指していました。代替テキストなしで挿入している画像、飛ばしている見出しレベル、ラベルがないとスキャナーに見抜かれるコントロール。もっともな指摘でした。7月、当社のストア側の3つの画面をあらためて真剣に見直したところ、そこで見つかったことは、きっかけとなったスキャン結果よりも興味深いものでした。

マーチャントがこうしたスキャンを行うのは好奇心からではありません。背後にある圧力は実在し、数字に表れています。2025年には米国連邦裁判所に3,117件のウェブアクセシビリティ訴訟が提起され、前年の2,452件から27％増となりました。ADA第3編に基づく連邦提訴全体に占めるウェブアクセシビリティ案件の割合は、28％から36％に上昇しています。州裁判所を含めると、UsableNetの年次レポートは2025年の合計を約5,100件と見積もり、その約70％がECを対象としています。EUでは欧州アクセシビリティ法が加盟国各国の国内法を通じ2025年6月28日から適用されており、2026年6月4日にはカーン大審裁判所がCarrefour Franceに対して判決を下しました。

ここに欠落があります。心配するマーチャントに向けてよく言われる助言は2つです。評価の高いテーマを選ぶこと、そしてアクセシビリティツールバーを追加するウィジェットを入れること。どちらもページ上のサードパーティアプリには届きません。テーマがページを描画し、アプリはその上に自分のマークアップを差し込みます。多くは、すべての上に開くモーダルとしてです。テーマの監査はそのモーダルの中まで見に行きませんし、ツールバーでは直せません。スキャナーもその中の表層しか捉えられず、当社もつい最近まで、自分たちのモーダルの中に何があるのかを確信を持っては言えませんでした。

アプリがアクセシビリティを壊すとは具体的にどういうことか

抽象的な話ではなく、主に代替テキストの問題でもありません。当社の画面で見つかったことと、他社のアプリでも確認するであろうことは、9つのパターンでほぼ網羅できます。多くは特定のWCAG達成基準に対応し、対応しないものはその旨を記しています。

最後の列を見てください。9行中8行は、どのウィジェットを入れていようと、マーチャント側ではどうやっても直せないものです。だからこそ、アプリ選びは機能の判断であると同時に、アクセシビリティの判断でもあるのです。

自社アプリで見つかったこと

WCAG 2.1および2.2のレベルAAで監査した3つの画面は、商品ページのアップセルポップアップ、決済に進む途中で表示されるカートポップアップ、そしてスライドカートです。今回はスキャナーのスコアではなく、描画されたマークアップをコントロール単位で検査しました。

結果はまちまちでしたが、おそらくそれが普通なのだと思います。スライドカートの出発点は予想より良好でした。閉じる・削除のコントロールは本物のボタンで、すべての商品画像には既に説明的な代替テキストがあり、決済ボタンには既にアクセシブルな名前が付いていました。中身があったのはモーダルで、同じような問題が3つの画面すべてで繰り返されていました。これが実は有益な発見でした。繰り返しということは、3つ別々に直すのではなく、共通の修正が1つで済むということです。

最も深刻な2点は、スキャナーが指摘していたものではありませんでした。1つはフォーカススタイルの抑制です。これは聞こえ以上に悪い問題で、書かれた対象だけでなく、それを継承するすべてのコントロールでキーボード操作を壊します。もう1つは、画面に見えているのにタブ順序から外れたままのコントロール群です。これは動いているはずの機能を、気づかぬうちにマウス専用機能に変えてしまいます。キーボードで操作する人は、その機能の簡易版を使えるのではありません。一切使えないのです。対応は画面ごとに3つのチケットに分け、7月末にクローズしました。

適合を謳わない理由

意図的にクローズしなかった点が1つあります。Candy Rackのストア側の色はすべてマーチャントが編集できますが、設定された値のコントラストを当社は検証していません。監査したストアでは設定済みの色はすべて基準を満たしていましたが、マーチャントが何の警告もなく1.4.3違反の設定にしてしまうことを防ぐものはありません。設定画面へのコントラストチェックの追加は検討リストに入っています。それが入るまでも、入った後も、このアプリを入れればストアが適合になるとは申し上げません。

とはいえ、アクセシビリティツールバーが無意味だという話ではありません。表示の仕方を訪問者が調整でき、運営側にはモニタリングをもたらします。当社のコンプライアンス向けShopifyアプリまとめで、Cookie同意やGPSR、請求書、利用規約と並んで1つ取り上げているのもそのためです。ただ、それは根本的な修正ではなく、あなた同様他のアプリのモーダルの中には手が届きません。適合とは、ある日のストア全体の性質であり、単一のベンダーが証明できる立場にはありません。ベンダーが伝えられるのは、何を監査し、何を変え、何が未解決なのかだけです。

ストアのアプリを確認する方法

役に立つ確認は、10分ほどでご自身でできます。スキャナーも必要ありません。ここで重要なことの大半は自動ツールには見えません。自動ツールはalt属性の欠落やコントラスト不足を見つけるのは得意ですが、フォーカストラップ、タブ順序、読み上げの通知には目が届きません。今回のきっかけとなったスキャン結果は、すべて前者の範囲でした。実際に利用者を締め出していた2つの問題を指摘したものは、一つもありませんでした。

1. マウスをキーボードから離し、そのままにしてください。
2. Tabキーで商品ページをたどり、フォーカスリングを見守ってください。どこかで消えたらそこで中断。すでにブロッカーを見つけています。
3. アプリが控える画面をすべて呼び出します。カートに入れる、カートドロワーを開く、決済へ進む、時間差で出るポップアップも待ちます。
4. それぞれについて4点を確認します。Tabで中に入れますか。フォーカスは背後のページに抜けず中に留まりますか。Escapeで閉じますか。閉じたとき、開くために押した要素にフォーカスが戻りますか。
5. 数量変更ボタン、バリエーション選択、割引コード入力欄、削除ボタンを含め、すべてのコントロールをキーボードだけで操作します。マウスでは届くのにキーボードで届かないものは2.1.1違反です。
6. VoiceOver（MacはCmd+F5）またはNVDAをオンにし、閉じるボタンと商品画像の読み上げを聞いてください。「ボタン」も「商品」もどちらも違反です。
7. 数量を変え、新しい合計が読み上げられるか確認します。更新部分にフォーカスが移らず、何も通知されなければそれは4.1.3違反です。

手順3から7で見つかったものは、すべてアプリ提供者の領分です。ということで、最後のパートです。

ベンダーに聞くべき4つの質問

インストール前に聞いてください。曖昧な返答もまた一つの答えです。

1. ストア側のアプリ画面をWCAG 2.1または2.2のレベルAAで監査しましたか。それはいつですか。
2. モーダルはダイアログのセマンティクスとフォーカス管理、つまりロール、アクセシブルな名前、フォーカストラップ、Escape、フォーカスの復帰を実装していますか。
3. アプリのすべての機能をキーボードだけで完了できますか。
4. そして、未解決の点は何ですか。

4つ目が最も多くを語ります。本当に答えを持つベンダーには必ず何かあります。誰しも未解決の点を抱えているからです。私の見方では、「完全に適合しています」はたいてい、誰も見ていないという意味です。FTCにaccessiBeの件で問われたのが何だったのかを思い出す価値はあります。適合という言葉そのものではなく、裏付けのできない適合の主張でした。

実際に原告や規制当局が追及するのは、部品を提供するベンダーではなく、ストアを運営するマーチャントです。顧客に届くもののかなりの部分が、自分で書いたわけでも編集できるわけでもないコードだからこそ、これは居心地の悪い話です。あなたが握っているのは、どのベンダーを選ぶか、そして何を求めるかです。アプリを比較中で、コンプライアンスではなくコンバージョンの観点で見たい場合は、アップセル戦略ガイドとチェックアウト最適化ガイドがその側面をカバーしています。EUへ販売しているなら、撤回ボタンの義務やその他の欧州固有の制約も、欧州アクセシビリティ法と同じ時期に重なってきます。

この監査から生まれた修正は7月末にリリースされ、Candy Rackで稼働しています。スライドカートやリワードバーも同様です。見落としがあればお知らせください。重大度を議論するより先に直します。

本記事は当社自身の監査について述べた一般的な情報であり、法的助言ではありません。ADA、欧州アクセシビリティ法、または各国の国内法に基づく義務については、弁護士にご相談ください。