Shopify でのアクセシビリティ

Shopify のテーマとアプリがアクセシビリティを決めます。チェックアウトは大部分が Shopify によって定められています。

よくある発見箇所

コントラストが低すぎるテーマ色、alt テキストのない商品画像、キーボード操作のないレビュー・ポップアップアプリ、ホバーでしか開かないメガメニュー、一時停止のないカルーセル。Shopify の中核は通常問題ではなく、テーマ、アプリ、リッチテキストエディターで作られたコンテンツが問題です。

テーマの確認と選定

テーマはコントラスト、可視フォーカス、見出し構造、メニューやフィルターのキーボード操作を左右します。選ぶ前の基準：ホーム、コレクション、商品ページを Tab キーでたどる — フォーカスは常に見えるか。メニューはマウスなしで開くか。テキストとボタンのコントラストは 4,5:1 以上か。Online Store 2.0 の標準テーマ（Dawn とその派生）は堅実な出発点です。有料テーマでは、デモでのキーボードテストと、提供元にアクセシビリティに関する記述を尋ねることが役立ちます。

商品画像、バリエーション、リッチテキスト

管理画面のすべての商品画像に、ファイル名ではなく内容を説明する alt テキストを付けます。バリエーション画像も同じです。バッジやバナーに画像として焼き込まれた文字（「セール」「本日限り」）はスクリーンリーダーには見えません。実際のテキストを使いましょう。商品説明のリッチテキストエディターでは見出しレベルをきれいに使い（文字を大きくするだけにしない）、リストは本物のリストとして使います。

アプリと埋め込みウィジェット

レビュー、ポップアップ、アップセル、Cookie バナーのアプリは、キーボードフォーカスを閉じ込める、ラベルがない、閉じる方法のないオーバーレイを表示する、といった独自のウィジェットを差し込むことがよくあります。各アプリを個別にキーボードでテストしてください。スライダーやカウントダウンのアプリには一時停止が必要で、何も点滅させてはいけません。アプリとしてのアクセシビリティオーバーレイは構造的な問題を解決せず、障害当事者団体から批判されています。迷ったらアプリを外しましょう。

チェックアウト：Shopify が定めるもの、定めないもの

Shopify の標準チェックアウトは Shopify が保守しており、大部分がアクセシブルに作られています — そこであなたが動かせる部分は少ないです。あなたが影響できるのは、チェックアウト拡張やカスタムフィールド（ギフトメッセージ、年齢確認）で、これらはキーボードやスクリーンリーダーの利用を妨げることがあります。またチェックアウトまでの経路 — カート、割引コード欄、配送選択 — はテーマにあります。これらのステップも確認してください。

テストとよくある質問

手早いテスト：ホーム、コレクション、商品ページをキーボードだけで操作する、ブラウザーで 200% に拡大する、WAVE や axe DevTools のような拡張を実行する。a11yglass の無料スキャンはさらに、配信された HTML をコントラスト、alt テキスト、ラベル、言語、構造の観点で調べます。私の Shopify ストアにアクセシビリティ声明は必要ですか。原則として必要です — 消費者が購入するストアは BFSG の意味での電子商取引です。アクセシビリティ声明のページをご覧ください。Shopify のチェックアウトはすでにアクセシブルですか。大部分は Shopify の責任ですが、拡張が壊すことがあります。どのテーマがアクセシブルですか。認証マークはありません — 決め手は具体的なケースでの実装です。

a11yglass の役立ち方

無料スキャンは、配信された HTML と CSS を、自動的に認識可能な WCAG 違反について検査し、各所見について達成基準と具体的な対策を示します。問題のおよそ 20〜35 % を検出し、完全な評価に代わるものではありません。

続きを読む

最善の知識に基づく一般的な情報であり、法的助言ではありません。個別のケースについては、IT 法を専門とする法律事務所にご相談ください。