e コマース Web サイトをアクセシブルにするための 7 つのヒント

公開: 2021-01-14

人口の 15 ～ 20% が、視覚、運動関連、聴覚など、何らかの障害の影響を受けていることをご存知ですか? 私たちのような接続されたオンライン社会では、サイトのアクセシビリティを最適化することが絶対に不可欠です。

Web アクセシビリティは、電子商取引 Web サイトをできるだけ多くの人(障害のある人を含む) がアクセスできるようにするために使用されるさまざまな手法と実践の観点から定義でき、より多くのユーザーにリーチできます。これにより、サイトを構成するさまざまなページ全体でトラフィックとコンバージョンを増やすことができます.

十分に準備されたサイトは、何百万もの潜在的な訪問者を逃すことを防ぎます. さらに、デジタルアクセス可能な Web サイトを持つことで、SEO ランキングが向上します。

eコマースビジネスを国際的に成長および発展させる方法を発見する

身体的または精神的機能が低下している可能性のある障害者または高齢者がアクセスできる電子商取引 Web サイトを所有および維持することは、特定の規則を順守することを意味します。

目の不自由な方向け: 音声ブラウザなどを使用して、音声形式でコンテンツを聞く方法が必要です。
動きに障害のある人には、マウスを使わずに Web サイトを閲覧できるようにすることが重要です。

これらは、e コマース Web サイトをできるだけ多くの人がアクセスできるようにしたい場合に考慮すべき重要な側面です。設置しなければならないものはたくさんあります。

ここでは、ウェブサイトをよりアクセスしやすくするのに役立つ 7 つのヒントを紹介します。

人間工学的で使いやすいものにするための最善の方法を考えてください

ISO 9241 規格では、ユーザビリティを次のように定義しています。

見た目に美しいウェブサイトを作成するだけでは十分ではありません。 人間工学と使いやすさは、高品質の e コマースサイトの設計に不可欠です。実際、これらは無視したり見落としたりしてはならない側面です。 ユーザーエクスペリエンスを第一に考えることで、サイトが好印象を与え、ユーザーがサイトに戻ってきて友人や家族にそのサイトについて話す可能性が高まります。実際に Web サイトの開発を開始する前に、Web サイトのエルゴノミクスについて慎重に検討し、計画する必要があります。これには、ページがユーザーとどのようにやり取りするか、およびメニューをどのように表示するかの両方を検討することが含まれます。これらはすべて、ユーザーエクスペリエンスをより簡単にするのに役立ちます。ウェブサイトを簡単に閲覧できるようにすると、潜在的な顧客のプールが拡大します!

最適な構造を使用する

HTMLを適切に使用するだけで、多くの Web コンテンツに簡単にアクセスできるようになります。 Web ページは、ページコード内で簡単に見つけてすぐに編集できる多数のタグで構成されています。タグにはさまざまな種類があります。それぞれに独自の意味があり、ウェブページの構造に対する独自の効果があります。 すべてのタグには特定の目的があります。それらを正しい方法で使用してください！

フォームとコンテンツを分けておく

e コマースサイトのアクセシビリティを高めるには、コンテンツ(テキスト、画像、メニューなど) を含むHTML ファイルを、ウェブサイトのスタイルとフォーマットを定義するために使用するCSS ファイルとは別に保管してください。これを行うと、サイトの構造がより明確になり、複数の異なるタイプのデザインを作成できるようになります. これにより、特定の障害のある方に役立つテキストのみのバージョンだけでなく、スマートフォンやタブレットなどでの使用に適した、より大きなテキストとコンテンツのバージョンを提供できるようになります。

画像に代替テキスト (代替テキスト) を付けることを忘れないでください

代替テキストは、画像の短い説明です。これらは HTML コードの一部を形成し、視覚障害のあるユーザーが実際に画像を見なくても画像が何を表しているかを知ることができます。

最初のステップとして、存在する 3 つの異なるタイプの画像を区別することが重要です。

ボタンなどの簡単な情報を提供する画像
チャートやグラフなど、より複雑な情報を提供する画像。これらの種類の画像は、画像の内容を詳細に説明する HTML ページにリンクするパラメータを使用する場合があります。
装飾画像。e コマース Web サイトに視覚的な装飾を加えますが、箇条書きやフレームのように情報に関して興味を引くものではありません。

製品シートを備えた e コマースサイトの場合、ユーザーが視覚障害を持っている場合に備えて、代替テキストを使用してユーザーをガイドすることが不可欠です。

これらの代替テキストは考慮すべき重要なポイントです。 SEO ランキングの向上に役立ちます。

色とコントラストを正しく調整する

簡単で快適な読書体験を確保するために、十分に異なる色を選択してください。 明るい背景に暗いテキストなどの単純な組み合わせを選択します。テキストとページの背景の間に強いコントラストを維持することが非常に重要です。

画面に表示される色は、すべてのユーザーにとって必ずしも同じではないことに注意してください。これはすべて、画面設定とユーザー自身の視力の両方に依存します。

役に立つヒント: ユニバーサルにアクセス可能なフォントやタイポグラフィなどを使用して、HTML アクセシビリティ標準に準拠します。

ハイパーテキストリンクに関する明確な情報を提供する

あいまいさが少ないほど、Web サイトはアクセスしやすくなります。

リンク先のページに関して、リンクが正確でない場合があります。サイトに含まれるすべてのボタンとリンクには正確な説明が必要です。これにより、ユーザーがどこに移動したかがわかります。

例

視覚障害のある訪問者が、注文追跡機能にアクセスして注文を追跡したいと考えています。 「ここをクリック」ボタンを作成するのは得策ではありません。 Web サイトのページを閲覧する際に、点字端末や音声合成装置を使用する訪問者もいます。そのため、 「ご注文の進捗状況を追跡する」などのより正確な説明を含むボタンを使用してみてください。これにより、ユーザーにとってすぐにより多くの情報が得られます。

新しいウィンドウを開かないようにする

ポップアップウィンドウは、何か新しいことや何らかのイベントを宣伝するのに非常に役立ちます。一部のユーザーは、開いているすべてのページを表示できると便利ですが、それでも他のユーザーにとっては深刻な障害になる可能性があります (特に視覚障害者）。新しいウィンドウは基本的にブラウジングのリズムを「壊し」 、ユーザーが道に迷う可能性があります。したがって、可能であれば、別のページを開くかどうかを選択できるように、単純な右クリックを要求してください。ただし、選択の余地がなく、そうしなければならない場合は、HTML コードで適切な属性を使用してユーザーに通知することを忘れないでください。

e コマース Web サイトをアクセスしやすく、より包括的にすることで、すべてのユーザーのニーズを満たすことができ、トラフィックの増加とe 評判の向上という潜在的な利点がもたらされます。では、なぜこれ以上待つ必要があるのでしょうか。今日からウェブサイトの更新を始めましょう!