オンラインストアのアクセシビリティ向上方法

アクセシビリティとは、視覚、聴覚、運動、認知に障害のある顧客を含むすべての人が、障壁なくオンラインストアを閲覧し、理解し、購入を完了できるように設計することを意味します。ストアのアクセシビリティを向上させることは、より広い顧客層にリーチできるだけでなく、米国のアメリカ障害者法（ADA） や欧州経済領域の欧州アクセシビリティ法（EAA）などの規制により、オンラインビジネスがアクセシビリティ基準を満たすことがますます求められているため、法的リスクの軽減にもつながります。

このガイドでは、効果的なImageの説明文の書き方、見出しの構造化、Videoの字幕追加、アクセシブルな色の選択、フォームの明確なLabel付け方法について説明します。

オンラインストアのアクセシビリティ基準の理解

世界中のほとんどのアクセシビリティ要件は、障害のある人がデジタルコンテンツを利用しやすくするための国際的に認められた基準であるWebコンテンツアクセシビリティガイドライン（WCAG）に基づいています。WCAGは、コンテンツの説明方法、ページの構造、訪問者がフォーム、リンク、メディアとどのようにやり取りするかなどのエリアをカバーしています。

ページ構造やキーボードナビゲーションなど、多くの技術的なアクセシビリティの側面はSHOPLINEのテーマやパーツによって処理されます。以下のセクションでは、マーチャントとしてストア内のコンテンツをよりアクセシブルにするためにできることを説明します。

商品ImageとバナーへのAltテキストの追加

スクリーンリーダーは、画像を視認できない顧客に説明するために、短い文章のAltテキストに依存しています。

効果的なAltテキストを追加するには、商品ページ、バナー、またはセクションImageの設定で説明したいImageを開き、Altテキストフィールドに簡潔な説明を入力します。Altテキストを追加する場所は画像の種類によって異なります：

• 商品Image： 商品に移動し、商品を選択、カバーImageをクリックして、ALT属性を追加または更新します。
• バナーまたはセクションImage： 設定 > ファイルライブラリに移動し、選択したImageをクリックして、ALT属性を追加または更新します。

Altテキストを書く際は、以下の最善の方法に従ってください：

• 「画像」や「写真」とラベル付けするのではなく、画像が何を示しているのか、なぜ重要なのかを簡潔に説明してください。
  • 商品写真の場合は、商品自体を説明します。例：「木製のテーブルに折りたたまれたネイビーブルーのコットンクルーネックスウェット」
  • バナーやプロモーション画像の場合は、伝えているメッセージを説明します。例：「夏のセールバナー：すべての水着が30％オフ」
• 背景のテクスチャなど、情報を追加しない純粋に装飾的な画像の場合のみ、altテキスト欄は空白のままにしてください。
• 画像自体がクリック可能なリンク（例えば、コレクションにリンクするバナー）の場合は、画像ではなくリンク先やアクションを説明するaltテキストを書いてください。例：「サマーコレクションをショップ」など。「サングラスのあるビーチの写真」ではなく。

わかりやすいリンクとボタンのテキストを書く

スクリーンリーダーを使う顧客は、周囲のテキストを読まずにリンクやボタン間をジャンプしてページを移動することがよくあります。わかりやすく説明的なリンクやボタンのテキストを書くことで、リンク先やボタンの動作を理解しやすくなります。

リンクやボタンのテキストを書く際は、以下の最善の方法に従ってください：

• 「ここをクリック」や「続きを読む」のような曖昧なテキストは避け、リンク先やアクションを説明するテキストに置き換えます。例：配送ポリシーを見るやカートに追加など。
• リンク先ごとにリンクテキストをユニークに保ちます。異なるファイルにリンクする2つのリンクを同じラベルにしないでください。例：「PDFをダウンロード」と「Word版をダウンロード」を使い、同じ「ダウンロード」リンクを2つ使わないでください。
• リンクが新しいタブを開く場合やファイルをダウンロードする場合は、顧客に知らせます。例：「サイズガイドをダウンロード（PDF、2MB）」
• リンクを周囲のテキストと区別するために色だけに頼らないでください。下線や、顧客がリンクにカーソルを合わせたときのスタイル変更など、他の視覚的な手がかりを追加してください。

ページ見出しの正しい構造化

スクリーンリーダーは目次のように見出しレベルを使って、顧客がページをナビゲートし構造を理解するのを助けます。見出しレベルを正しく使うことは、コンテンツの全体的な整理と読みやすさも向上させます。

セクションをテーマエディターで配置する際に見出しをアクセシブルに保つため、以下の最善の方法に従ってください：

• ページごとにメイン見出し（見出し1）は1つだけにし、ページの核心的なトピック（商品名やコレクションタイトルなど）を反映させてください。
• 見出しのレベルは順序を守り、飛ばさないでください。例：見出し2の後に直接見出し4を使わないでください。
• 見出しスタイルは構造を反映するために使い、単に視覚的な大きさのためだけに使わないでください。実際にセクションタイトルでないテキストを強調するために大きな見出しスタイルを適用しないでください。

アクセシブルな画像カルーセルの設定

画像カルーセルやスライドショーは、自動で動くとアクセシビリティの課題を生じることがあります。カルーセルをアクセシブルに保つために、デフォルトで自動再生しないように設定することをお勧めします。

動画へのキャプションの追加

キャプションは、聴覚障害のある顧客が動画の内容を理解するのに役立ちます。また、音声をオフにして動画を視聴する顧客の視聴体験も向上させます。

ストアに動画を追加する際は、以下の最善の方法に従ってください：

• 特に商品デモやブランド動画など、ストアにアップロードするすべての動画にキャプションや字幕を追加してください。
• ポッドキャストやナレーションなど、音声のみのコンテンツにはテキストのトランスクリプトを提供してください。
• 画面読み上げソフトを使用する顧客にとって混乱を招くため、音声付きの自動再生動画は避けてください。

アクセシブルなカラ―組み合わせの選択

テキストと背景の十分なコントラストは、視力が低いまたは色覚異常のある顧客にとってストアの読みやすさを向上させます。

テーマの色をカスタマイズする際は、以下の最善の方法に従ってください：

• 本文テキストと背景のコントラスト比は、少なくとも4.5:1を目指してください。
• 大きなテキスト（18pt以上、または14ptの太字以上）やアイコンの場合は、少なくとも3:1のコントラスト比を目指してください。
• 必須フォームフィールドを赤色だけで示すなど、色だけで情報を伝えるのは避けてください。色はテキストやアイコンと組み合わせて使用してください。
  • 例：低コントラストのテキストとボタンは背景に対して読みづらいです。
    
  • 例：高コントラストのテキストとボタンは背景に対して読みやすいです。
    

アクセシブルなテキストの配置の選択

左右両端が均等に揃った両端揃えのテキストは、文字や単語の間隔が不均一になり、ディスレクシアや視力が低い顧客にとって読みづらくなることがあります。

ストア内のテキストをフォーマットする際は、以下の最善の方法に従ってください：

• 商品説明、バナー、その他のページコンテンツでは、両端揃えのテキストではなく左揃えのテキストを使用してください。
• セクションやカスタムコンテンツブロックに配置設定がある場合は、両端揃えではなく左揃えを選択してください。
  • 例：両端揃えのテキストは単語間の間隔が不均一になります。
    
  • 例：左揃えのテキストは単語間の間隔が均一で一貫しています。
    

フォームフィールドのラベルを明確にする

ストアでニュースレターの登録、問い合わせフォーム、カスタムチェックアウトフィールドなどのフォームを使用している場合、明確なラベルはすべての顧客が何を入力すべきか理解するのに役立ちます。

フォームにアクセシブルなラベルを付けるには、以下の最善の方法に従ってください：

• すべてのフィールドに目に見える、持続的なラベルを付けてください。プレースホルダーテキストだけに頼らないでください。なぜなら、顧客が入力を始めると消えてしまうからです。
• 必須フィールドは視覚的に（例：凡例付きのアスタリスク）およびフィールドのラベルテキスト（例：「メール（必須）」）の両方で明確にマークしてください。
• 一般的な「無効な入力」ではなく、何が間違っているのか、どう直せばよいのかを顧客に伝える明確で具体的なエラーメッセージを書いてください。