Shopifyストアのアクセシビリティ対策 — 誰もが使いやすいECサイトをつくる

「アクセシビリティって、大企業がやるものでしょ？」そう思っていませんか。実はアクセシビリティ対策は、ストアの売上やSEO、そして法的リスクにも直結する、 すべてのEC運営者に関わるテーマです。視覚に障がいのある方や高齢者だけでなく、片手でスマホを操作している人、明るい屋外で画面が見づらい人まで含めると、対象は驚くほど広がります。

わたし自身、Shopifyアプリ開発者としてクライアントのストアを改善するなかで、alt属性の設定やコントラスト比の調整といった小さな変更だけでも、直帰率が下がりコンバージョンに良い影響が出るケースを何度も経験してきました。この記事では、よくいただく質問に答える形で、Shopifyストアの現実的なアクセシビリティ対策をまとめてお伝えします。

このページでわかること

出典：WHO — Disability and health / Click-Away Pound Survey / Return on Disability — The Global Economics of Disability

Q1: アクセシビリティとは？

Webアクセシビリティ

年齢や障がいの有無、利用環境に関わらず、誰もがWebサイトの情報やサービスを利用できる状態のこと。国際標準である WCAG 2.1（Web Content Accessibility Guidelines）が世界共通の指標として使われています。

WCAG 2.1は「知覚可能（Perceivable）」「操作可能（Operable）」「理解可能（Understandable）」「堅牢（Robust）」の4原則で構成されていて、適合レベルがA・AA・AAAの3段階あります。ECサイトの実務的なゴールは レベルAA の達成です。Shopifyの公式デザインシステム「Polaris」も、このレベルAA準拠を基準として開発されています。

出典：W3C — Web Content Accessibility Guidelines (WCAG) 2.1 / Shopify Polaris — Accessibility

ECサイト固有の文脈で言えば、商品画像のalt属性、価格表示のコントラスト、購入ボタンへのキーボードアクセスといった「買い物の動作」が誰でもできることが核になります。情報を伝える設計と、操作を妨げない設計の両輪、と覚えておくと判断がブレません。

Q2: なぜ重要？

理由は3つあります。それぞれ数字で見ると、放置するコストの大きさが見えてきます。

1. 01

   潜在顧客を取りこぼさない

   アクセシビリティに問題があるサイトでは、障がいを持つユーザーの71%が離脱すると報告されています。世界で13億人、日本国内でも約965万人（厚労省推計）が何らかの障がいを抱えており、家族を含めれば購買決定に関わる層はさらに広がります。
2. 02

   SEO評価が向上する

   alt属性、見出し階層、セマンティックHTMLといったアクセシビリティの基本は、そのまま SEOのベストプラクティス でもあります。Googleのクローラーは画面を「見る」のではなくHTMLの構造を「読む」ため、アクセシブルなサイトほど検索エンジンにも内容が正確に伝わります。
3. 03

   法的リスクを回避する

   2024年4月、改正障害者差別解消法が施行され、民間事業者にも 合理的配慮の提供 が義務化されました。欧米ではECサイトのアクセシビリティ不備を理由とした訴訟も毎年数千件規模で発生しており、日本でも今後同様の流れが進む可能性が指摘されています。

出典：内閣府 — 障害を理由とする差別の解消の推進

Q3: 何から始める？

優先度の高い5つを、わたしが実際にクライアント案件で着手している順に並べました。すべて管理画面とテーマエディタだけで完結する内容です。

1. 1

   画像にalt属性を設定する

   すべての商品画像・バナー画像に代替テキストを設定します。Shopify管理画面で商品画像をクリックし「代替テキスト」欄に「青いリネンのワンピース」のように具体的に入力するだけ。装飾目的の画像は空のalt（alt=""）にして、スクリーンリーダーが読み飛ばせるようにします。

2. 2

   色のコントラスト比を4.5:1以上に保つ

   通常テキストはWCAG 2.1で 4.5:1以上 が基準です。無料ツール WebAIM Contrast Checker に文字色と背景色を入力して測定し、足りなければテーマエディタの「テーマ設定 → 色」で調整します。CTAボタンやナビゲーションリンクも忘れずチェック。

3. 3

   キーボード操作で全機能にアクセスできるか確認

   マウスを使わずTabキーだけで「商品閲覧 → カート追加 → チェックアウト」まで進めるかをテストします。フォーカスリング（青い枠）が見えない、モーダルが閉じられない、といった問題があれば優先的に修正してください。

4. 4

   見出し階層を論理的に整える

   h1のあとにいきなりh4を置かない、装飾目的でh2を使わない、という基本を守ります。スクリーンリーダーのユーザーは見出しをジャンプしてページを把握するため、階層が崩れているとナビゲーションが機能しません。

5. 5

   フォームに必ずラベルをつける

   メルマガ登録やお問い合わせフォームの入力欄に <label> を紐づけます。プレースホルダーだけだと、入力中にヒントが消える上、スクリーンリーダーが目的を読み上げられません。標準テーマは対応済みですが、アプリ追加のフォームは要確認です。

キーボード操作のセルフチェックリスト

• Tabキーでリンク・ボタン・フォームを順番に移動できる
• フォーカスリング（青い枠線）が常に表示される
• モーダルやドロワーをEscapeキーで閉じられる
• 「カートに追加」ボタンにEnter／Spaceキーで反応する
• 「メインコンテンツへスキップ」リンクが用意されている

Q4: コストはかかる？

結論から言えば、 初期対策の9割は無料ツールだけで完結します。 必要なのはチェックツールに触る時間と、テーマエディタを開く手間だけです。

有料ソリューションが必要になるのは、 大規模ストアで継続的なモニタリングをかけるケース に限られます。たとえば accessiBe や UserWay のような自動修正系SaaSは月額$49〜ですが、まずは無料ツールで現状把握をしてからで十分です。

Q5: 法的リスクは？

出典：内閣府 — 改正障害者差別解消法リーフレット / W3C — WCAG 2.1

Shopifyテーマ選びでリスクを下げる

リスク回避の最短ルートは、 アクセシビリティ対応が組み込まれた公式テーマ（Dawnなど）を選ぶ ことです。Shopifyの公式テーマは定期的にアクセシビリティ改善のアップデートが入ります。テーマ選定時は以下をチェックしましょう。

• ARIA属性（aria-label、aria-expanded など）が適切に使われている
• キーボードナビゲーションでストア全体を操作できる
• 「メインコンテンツへスキップ」リンクが実装されている
• レスポンシブでモバイルのタッチターゲットが44px以上ある
• テーマが定期的にアップデートされている

まとめ — 小さく始めて、継続する

アクセシビリティ対策は、特別な技術や予算がなくても今日から始められます。alt属性、コントラスト比、キーボード操作の3つだけでも整えておけば、そのストアは「使える」ストアに大きく近づきます。

SEO評価が上がり、潜在顧客の取りこぼしが減り、法的リスクも下がる。やらない理由を探すほうが難しいテーマです。まずはWAVEとLighthouseで自分のストアを診断してみてください。30分の作業で、思っていた以上に改善ポイントが見つかるはずです。

テーマのカスタマイズと合わせて整えると、効果はさらに大きくなります。具体的な手順はこちらの記事にまとめています。

→ Shopifyテーマカスタマイズの基本ガイド

→ Shopifyで誰もが使いやすいストアをはじめる