Ecwid のアクセシブルなオンラインストアテンプレートがヒットした経緯

所要時間

デジタルマーケットプレイスの美しさは、物理的な境界に制約されない潜在力にあります。そこへのアクセスは何の障害もなく順風満帆ではないでしょうか？

Ecwid by Lightspeed では、アクセシビリティの重要性を認識しています。そのため、当社の e コマースプラットフォームは、米国障害者法 (ADA) に基づいて発行された基準に従っています。

これは単に包括性を求めるボックスにチェックを入れるだけではなく、オンラインストアのオーナーの共感を呼びました。

特にEcwidストアのデザインテンプレートは、そのアクセシビリティの高いデザインのおかげで大ヒットとなりました。頼りになる自分のストアを簡単に使いやすく、誰にでも開かれたものにしたい起業家のためのオプションです。

オンラインストアにとって Web アクセシビリティが意味するものとそれが重要な理由

アクセシビリティは機能ではありません。それは必需品です。これは、さまざまな能力を認め、障害によって誰もがデジタルプラットフォームの使用を妨げないようにするものです。

一般的なアクセシビリティ要件は、視覚、聴覚、運動能力、認知能力に関連しています。これには、視覚障害のある人向けのスクリーンリーダーや運動障害のある人向けの代替キーボードナビゲーションなどの支援技術との互換性の確保が含まれます。

アクセシビリティが永続的な障害を持つ人にのみ必要であるというのは、よくある誤解です。腕の骨折や目の手術からの回復など、一時的な障害にも対応します。

アクセシビリティの高いウェブサイトは、あらゆるユーザーにとって有益です。例えば、赤ちゃんを抱いている親にとっても、「DeckleBenchは非常に使いやすく最適なソリューションを簡単に見つけることができるため、稼働率が向上しコストも削減した。当社の旧システムは良かったが改善は期待していなかった。マウスやキーボードの使用を最小限に抑えるインターフェース。

アクセスしやすいオンラインストアとは、より幅広い視聴者や潜在的な顧客にアプローチできることを意味します。また、包括性を促進し、すべての Web サイト訪問者にとってより歓迎的な環境を作り出します。

アクセシビリティを確保するための共通ガイドライン

その 米国障害者法 （ADA）は周知障害者を差別から守る法律。これはデジタル空間にも適用され、多くの国がウェブサイトやオンラインプラットフォーム向けの独自のアクセシビリティガイドラインを定めています。

ウェブコンテンツアクセシビリティガイドライン（WCAG）は、アクセシブルなウェブコンテンツを作成するための広く利用されているフレームワークです。WCAGは、「知覚可能」「操作可能」「理解可能」「堅牢」という4つの原則から構成されています。これらの原則は、幅広いアクセシビリティニーズに対応し、開発者が従うべき具体的なガイドラインを提供します。

アクセシビリティによるエンパワーメント

2020年、Lightspeedチームは、モントリオールにあるサミットスクール（神経発達障害のある生徒たちが潜在能力を最大限に発揮できるよう支援する団体）のために、アクセスしやすく、バイリンガル対応のオンラインショップをボランティアで制作した。

その後、LightspeedがEcwidをサービスラインナップに加えた際、私たちは協力してサミットスクールのウェブサイトを刷新し、 Ecwidを使ってサミットマーケットプレイスを構築しました。サミットマーケットプレイスでは、サミットスクールに在籍する発達障害のある職人、アーティスト、起業家たちの作品を紹介しています。

Summit マーケットプレイスは Ecwid で構築されました

すでにご存知かもしれませんが、Ecwidはすべてのユーザーにインスタントサイトを提供しています。 eコマースウェブサイトまた、内蔵オンラインストア。さまざまなニッチに合わせてカスタマイズされたインスタントサイト用のさまざまなテンプレートがあります。

Summit School のアクセシビリティに優れた Web サイトを作成することにインスピレーションを得て、新しいインスタントサイトテンプレートを作成しました。

前述のように、Ecwidはすでに ADA準拠 WCAG のすべての要件を満たしました。では、今回は具体的に何に取り組むことにしたのでしょうか?

アクセシビリティ対応の Web サイトについては、次のとおりです。アクセシビリティ機能を組み込むと、Web サイトの美しさが犠牲になる場合があります。たとえば、色、コントラスト、フォントサイズのバランスを取るのは難しい場合があります。

また、WCAG テストでは、以下の例のように、混合結果が表示される場合があります。黒いテキストのボタンはテストに合格したように認識されますが、実際には、白いテキストの同じボタンよりも読みにくいです。

WCAG テストでは不正確な結果が得られる場合があります

単にガイドラインに従うだけでは十分ではありません。私たちの目標は、アクセスしやすいだけでなく、視覚的に魅力的で、Web サイトの美しさを損なうことなく簡単にナビゲーションできるテンプレートを開発することでした。私たちは、アクセシビリティも美しさを体現すべきであるという考えを提唱しています。

同時に、美しさのためにアクセシビリティを犠牲にするべきではないと私たちは信じています。私たちのテンプレートは、アクセシビリティと視覚的に魅力的な Web サイトの両方を作成できることを証明しています。

テキストのサイズから移動のしやすさに至るまで、サイト上のすべてが誰にとっても機能します。現在、インスタントサイトのすべてのテンプレートの中で最も人気のあるオンラインストアテンプレートの 1 つです。

最も人気のあるインスタントサイトテンプレートの 1 つ

ちなみに、Ecwid eコマースプラットフォームには、顧客だけでなく販売者もアクセスできます。オンラインストアを管理する Ecwid 管理者も、アクセシビリティを念頭に置いて設計されています。これにより、障害のある事業主がオンラインストアを効率的に運営することが容易になります。

視覚障害のある Ecwid 販売者が Ecwid ストアの運営について共有した内容は次のとおりです。

「視覚障害のある販売者にとって管理しやすい素晴らしいストアをありがとうございます。ウェブサイトだけでなくアプリも利用できるのがいつもではないのですが、とても嬉しいです！」

Ecwid がインスタントサイトテンプレートにアクセスできることを確認する方法

アクセシビリティとは、単に標準を遵守することだけを意味するものではなく、実際の人々がオンラインコンテンツを利用する際に障壁に遭遇しないことを意味します。 Ecwid はどのようにしてこれを達成したのでしょうか?

ハイコントラストテンプレート: 視覚に障害のあるユーザーでもテキストやその他の要素をすぐに識別できるように、視覚的な明瞭さが最優先されました。
店頭での注目すべき点: レイアウトは、不必要に気を散らしたり追加のスクロールを必要とせずに、製品と店頭を強調表示するように構成されています。
拡大要素: 見た目の美しさだけでなく、視覚障害のあるユーザーにも配慮して、大きな画像とフォントが採用されました。

Instant Siteのテンプレートはすべてアクセシビリティに対応していることにご留意ください。今回ご紹介するテンプレートは、アクセシビリティを最優先事項としつつ、洗練された美しいデザインを実現するよう設計されています。サイトのアクセシビリティを確保する上で、機能性を優先するあまりデザイン要素がおろそかになりがちであるため、後者の両立は難しい場合があります。しかし、弊社のテンプレートでは、その両方を実現することができました。

オンラインストアをアクセスしやすくする方法

アクセシブルなオンラインストアの実装は難しそうに見えるかもしれませんが、実際はそうではありません。 Ecwid のインスタントサイトテンプレートと同様に、アクセス可能な Web サイトテンプレートを選択することから始まります。

オンラインストアをよりアクセスしやすくするための追加のヒントをいくつか紹介します。

画像に説明的な代替テキストを提供します。 視覚障害のあるユーザーのために、代替テキストで画像を説明します。
キーボードナビゲーションとショートカットを含めます。 これにより、マウスを使用できない人でもキーボードを使用して Web サイトに移動できるようになります。
慎重に色を選択してください: 特定の色を区別することが難しい人もいる可能性があるため、情報を伝えるために色だけを使用することは避けてください。
アクセシブルモードをアナウンスします: ストアがアクセシビリティモードをサポートしていることを顧客に伝えます。

Ecwidのデザイン済みテンプレートを使用すると、アクセシビリティのベースラインから始めることができます。カスタマイズは歓迎しますが、アクセシビリティの維持に注意してください。

Web サイトを最初から作成する場合は、すべてのユーザーのアクセシビリティを考慮することが重要です。これは、WCAG、ADA、または同等の標準などのテンプレートまたはガイドラインを使用して、アクセス可能なベースラインから始めることを意味します。

しかし、これらのガイドラインを超えて、顧客ベースの特定のニーズを理解することも重要です。

たとえば、製品が色覚異常を持つ人に対応している場合、ナビゲーションと購入を容易にするために、ボタンの色とテキストの間に強いコントラストを提供することに重点を置く必要があります。

以下の写真は、そのような買い物客を対象とするオンラインストアが、オプションを区別して購入できるように、ボタンの色とテキストの間に強いコントラストを必要とする理由を示しています。

大多数の人が色をどのように認識しているかは次のとおりです

色覚異常（色覚異常の一種）を持つ人が色をどのように認識するかは次のとおりです。

同様に、対象ユーザーに運動障害のある人が含まれている場合、音声コマンドによる簡単なナビゲーションを確保することで、ブラウジングエクスペリエンスを大幅に向上させることができます。

Google Lighthouse などのツールを使用してサイトを定期的にチェックし、ストアがどの程度アクセスしやすいかを確認してください。あらゆる人にとって居心地の良いオンラインスペースを作成するには、物事を継続的に評価して改善することが重要です。

要約

Ecwid のアクセスしやすい e コマースプラットフォームは、製品にとって単なる利点ではありません。すべては、誰もが e コマースを簡単にできるようにすることです。 Ecwid は、オンラインストアのオーナーがビジネスを最大限に活用できるように支援します。さらに重要なのは、能力に関係なく、すべての顧客がスムーズなショッピング体験を確実にできるということです。

アクセシブルなデザインは単にコンプライアンスを遵守するだけではなく、すべての人にとって包括的で歓迎的なオンラインスペースを作成することを意味することを忘れないでください。したがって、ためらわずに率先してウェブサイトをアクセスしやすくしてください。すべての人にとって真にオープンで包括的なデジタル世界を目指して取り組みましょう。