すべての訪問者がオンライン ストアを簡単にナビゲートできるようにするためのヒント。

訪問者がオンライン ストアをナビゲートしやすくなるようにするには、Commerceサイトをデザインする際にアクセシビリティ機能を組み込むことが重要です。これにより、インクルージョンが促進されるだけでなく、オーディエンスの拡大にもつながります。このガイドでは、検討すべきデザイン要素と、Commerceサイトのアクセシビリティを高めるためのリソースを紹介します。

注: このガイドは、開始に役立つ資料として利用できますが、法的アドバイスとして解釈したり依拠したりはしないでください。Squarespaceは、サイトを特定のアクセシビリティに関する法律、規制、または基準に準拠させるためのアドバイスを提供することはできません。

商品画像

間隔とサイズ

商品アイテムのアイキャッチ画像はすべて、ストア ページのグリッドに配置されます。視覚障害のある訪問者がストアにアクセスしやすくするために、画像の間隔を考慮することをおすすめします。パディングを増やしたり、列数を変更したりして、ストア セクション スタイルの画像のサイズを増やすことができます。

商品画像に代替テキストを追加する

有形商品を販売する場合は、商品画像に説明文 (代替テキスト) を付けることが重要です。代替テキストは、スクリーン リーダーを使用する訪問者がサイトを移動するのに役立ちます。あるいは、ネットワークが遅いなど、さまざまな理由で画像にアクセスできない訪問者にとっても便利です。ページをスキャンするとき、スクリーン リーダーは画像を識別し、訪問者に代替テキストを読み上げます。個別の画像と商品を説明する短い用語を使用します。代替テキストには次の情報を入れるようにしてください。

• 商品の色 - このテキストは、訪問者が購入する商品の色を判別する唯一の方法となる可能性があります。
• 画像の単語や説明、および商品上の位置 - 商品に文字や画像が印刷されている場合、スクリーン リーダーはそれらを読んだり訪問者に説明したりはしません。

画像ズームを有効にする

視覚障害のある訪問者を支援するために、画像ズームを有効にすることを検討してください。この機能を有効にすると、商品画像を拡大して素材や質感、細部まで詳しく見ることができます。この機能の詳細については、「ストア ページの特別な機能」を参照してください。

商品に関する追加情報

商品エディターの [追加情報] セクションにブロックを追加すると、商品ページにカスタム コンテンツを追加できます。次のような情報を追加できます。

• パッケージの寸法と重量。これにより、顧客はより適切な配送を計画できます。
• キャプション付きの商品の動画。
• サイズ表 (衣料品を販売している場合)。サイズ表は通常、スクリーン リーダーでは読めません。スクリーン リーダーに適したテキストベースのサイズ表の作成の詳細については、Kiwi Sizingなどのサードパーティー サービスをご覧ください。

注: サードパーティー サービスに関する質問はすべて、サードパーティー プロバイダーに直接問い合わせてください。

精算プロセス

コール トゥ アクション ボタン

[カートに追加] ボタンや [買い物を続ける] ボタンなどの Commerceの対話型要素に顧客がアクセスできることが重要です。このため、ボタンのスタイルを変更すると、より注目を集めることができます。これを行うには、形状、アウトラインの太さ、その他の書式設定オプションを変更します。

ショッピング カートのアイコン

ショッピング カートのアイコンのサイズは調整できませんが、境界線を追加し、色のコントラストを適切に保つことで、アイコンがアクセスしやすくなります。

ある商品を販売していて、ショッピング カートの処理を省略したい場合は、エクスプレス チェックアウトを有効にできます。エクスプレス チェックアウトでは、[購入] ボタンを目立たせ、アクセスしやすいようにスタイルを設定できます。

音声に関する考慮事項

サイトに音声コンテンツがある場合は、トランスクリプトを追加できます。これにより、聴覚に障害のある訪問者にとってコンテンツがアクセスしやすくなり、SEOにも効果的です。ページを整理するために、「リンクされていません」ページにトランスクリプトを含めることもできます。

言葉づかい

商品やサービスの説明や宣伝には、わかりやすい言葉を使用することが重要です。効果的な文面を、アクセシビリティを念頭に置いて作成するには、「アクセスしやすいサイト コンテンツを作成する」を参照してください。