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

「アクセシビリティって、大企業がやるものでしょ？」

そう思っていませんか。実はアクセシビリティ対策は、ストアの売上やSEOにも直結する すべてのEC運営者に関わるテーマ です。視覚に障がいのある方や高齢者だけでなく、片手でスマホを操作している人、明るい屋外で画面が見づらい人など、日常的に「使いにくさ」を感じているユーザーは想像以上に多くいます。

わたし自身、クライアントのストアを改善するなかで、alt属性の設定やコントラスト比の調整といった小さな改善でも、直帰率が下がりコンバージョンに良い影響が出るケースを何度も経験してきました。

この記事では、Shopifyストアで 今日からできるアクセシビリティ対策 を具体的に紹介します。

出典：WHO - Disability、Click-Away Pound Survey、Return on Disability - The Global Economics of Disability

アクセシビリティが重要な3つの理由

1. 01

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

   アクセシビリティに配慮していないサイトは、視覚・聴覚・運動機能に制約のあるユーザーを無意識に排除しています。対策することで、これまでリーチできなかったお客さんにストアを使ってもらえるようになります。
2. 02

   SEO評価が向上する

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

   法的リスクを回避する

   欧米では、ECサイトのアクセシビリティ不備を理由とした訴訟が増加しています。日本でも2024年4月に改正障害者差別解消法が施行され、民間事業者にも合理的配慮の提供が義務化されました。今のうちに対応を進めておくことが大切です。

出典：内閣府 - 障害者差別解消法の改正

今日からできる5つのアクセシビリティ対策

1. 画像にalt属性を設定する

すべての商品画像・バナー画像に 代替テキスト（alt属性） を設定しましょう。スクリーンリーダーを使っているユーザーにとって、alt属性は画像の「目」の代わりです。

Shopifyの管理画面では、商品画像をクリックして「代替テキスト」の欄に入力するだけで設定できます。

参考：Shopify公式ヘルプ - 画像の代替テキスト

2. 色のコントラスト比を確認する

テキストと背景の色のコントラストが不十分だと、ロービジョン（弱視）の方だけでなく、明るい場所でスマホを見ているすべてのユーザーにとって読みにくくなります。

WCAG 2.1 では、通常テキストのコントラスト比は 4.5:1以上 が基準です。

1. 1

   コントラスト比を測定する

   無料ツール WebAIM Contrast Checker にテキスト色と背景色を入力して確認します。
2. 2

   テーマエディタで色を調整する

   Shopify管理画面の オンラインストア → テーマ → カスタマイズ → テーマ設定 → 色 から、文字色と背景色を変更できます。
3. 3

   ボタンやリンクも忘れずに確認する

   本文だけでなく、CTAボタンやナビゲーションリンクのコントラストも基準を満たしているか確認しましょう。

3. キーボード操作に対応する

マウスが使えないユーザーは、Tabキーでページ内を移動します。フォーカスが見えない、あるいは特定の要素にキーボードでたどり着けないストアは、こうしたユーザーにとって操作不能になってしまいます。

• Tabキーでリンク・ボタン・フォームを順番に移動できるか確認する
• フォーカスリング（青い枠線）が表示されるか確認する
• モーダルやドロワーがキーボードで閉じられるか確認する
• 「カートに追加」ボタンにEnterキーでアクセスできるか確認する

4. 見出し構造を正しく設定する

見出し（h1〜h6）を見た目の大きさだけで選ぶのではなく、 論理的な階層構造 になるように設定しましょう。スクリーンリーダーのユーザーは見出しをジャンプして移動するため、h1のあとにいきなりh4が来ると、ページの構造がわからなくなります。

セマンティックHTML

HTMLタグを見た目ではなく「意味」に基づいて使うこと。たとえば、太字にしたいだけなら <b> ではなく <strong>（重要性を示す）を使い、ナビゲーションには <nav> タグを使います。検索エンジンとスクリーンリーダーの両方にとって、ページの構造が正しく伝わります。

5. フォームにラベルをつける

メールマガジンの登録フォームやお問い合わせフォームで、入力欄にラベル（<label>）が紐づけられていないケースがよくあります。プレースホルダーだけでは、スクリーンリーダーが入力欄の目的を読み上げられません。

Shopifyの標準テーマはラベルが適切に設定されていますが、カスタマイズやサードパーティのアプリで追加したフォームは必ずチェックしましょう。

アクセシビリティチェックに使える無料ツール

Shopifyテーマ選びのポイント

Shopifyの公式テーマ（Dawn など）は、アクセシビリティの基本がしっかり考慮されています。テーマを選ぶ際は、以下の点をチェックしましょう。

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

参考：Shopify公式ヘルプ - テーマのアクセシビリティ

まとめ

アクセシビリティ対策は、特別な技術がなくても始められるものがたくさんあります。alt属性の設定、コントラスト比の確認、キーボード操作のテスト。こうした小さな積み重ねが、 すべてのお客さんにとって使いやすいストア をつくります。

SEOにも良い影響があり、法的なリスクも減らせる。やらない理由がないと言ってもいいくらいです。

まずはWAVEやLighthouseで自分のストアをチェックしてみてください。思っているよりも改善すべきポイントが見つかるはずです。

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