オンラインストアをアクセシブルにする方法

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

このガイドでは、効果的な画像説明の書き方、見出しの構造化、動画のキャプション追加、アクセシブルな色の選択、フォームの明確なラベル付け方法について説明します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 本文テキストと背景の間で、少なくとも4.5:1のコントラスト比を目指してください。
• 大きなテキスト（18pt以上、または14ptの力強いテキスト以上）やアイコンの場合は、少なくとも3:1のコントラスト比を目指してください。
• 情報を伝える際に色だけに頼るのは避けてください。例えば、必須フォームフィールドを赤だけで示すのではなく、色とテキストやアイコンを組み合わせてください。

  • 例：低コントラストのテキストとボタンは背景に対して読みづらいです。

    

  • 例：高コントラストのテキストとボタンは背景に対して読みやすいです。

    

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

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

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

• 商品説明、バナー、その他のページコンテンツでは、両端揃えのテキストではなく左揃えのテキストを使用してください。
• セクションやカスタムコンテンツパーツに配置設定がある場合は、両端揃えではなく左揃えを選択してください。

  • 例：両端揃えのテキストは単語間の間隔が不均一になります。

    

  • 例：左揃えのテキストは単語間の間隔が均一で一貫しています。

    

     

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

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

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

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