包括的なWebデザインを導くための10のコア原則

調査によると、ウェブサイトの約70％は、支援技術では少なくとも部分的に読み取れません。

この統計は衝撃的であり、衝撃的です。 非常に多くのブランドが何百万もの障害者のインターネットユーザーに対する明白な考慮を忘れているのはどうしてですか？

障害者が社会やビジネスの中でどれほど頻繁に見えなくなるかを考えると、残念ながらそれはより理にかなっています。

Webコンテンツアクセシビリティガイドライン（WCAG）は、Webサイトがアクセシビリティを向上させ、したがって包括性を向上させる方法を定義しています。

これらのガイドラインの多くは法律で定められているため、Webサイトにアクセスできない場合、ビジネスが危険にさらされる可能性があります。

あなたのビジネスと顧客への包括性の利点は計り知れません。

アクセシビリティは、より多くのオーディエンスシェアを提供しますが、顧客の信頼を構築するための鍵でもあります。

障害の有無にかかわらず、すべてのお客様は、よりスムーズなWebサイトエクスペリエンスの恩恵を受けることができます。 彼らはこの経験を気にするビジネスに感謝するでしょう。

包括性とは、顧客のニーズの範囲と、サービスへのアクセスを制限する方法を検討することを意味します。 アクセシビリティ機能の実装を成功させると、これらの制限を克服するのに役立ちます。

この記事はウェブサイトのデザインに焦点を当てていますが、アクセシビリティの重要な問題はインターネットアクセスの欠如であることに注意してください。したがって、すべての分野で可用性を強化することを検討する必要があります。

ダイヤルイン電話会議オプションなどの電話技術は、すべての顧客とのリモート連絡を維持するのに役立ちます。

それでは、包括的なWebデザインを導くための10のコア原則に取り掛かりましょう。

包括的な設計ガイドライン

1.柔軟であること

「障害」という用語は、人間の幅広い経験とニーズを網羅しています。 あなたのウェブサイトをアクセシブルで包括的にする方法を考えるとき、これは恐ろしいかもしれません。

ただし、障害の有無にかかわらず、すべての顧客が大きく異なるニーズと好みであなたのビジネスに来ることを覚えておいてください。

確かにすべての人を満足させることはできませんが、できるだけ多くの顧客にリーチするための柔軟なエクスペリエンスを提供できます。

ユーザーがサイトにアクセスするコンテキストを考慮してください。 たとえば、彼らはどのような種類のデバイスを使用していますか？ 彼らは職場や自宅であなたのサービスを利用する可能性が高いですか？

顧客のプロファイルを作成して、年齢や性別などの人口統計を決定します。 これは、ビジネスに最適なeコマースプラットフォームまたはページデザインを理解するための鍵の1つです。

既存の顧客を満足させ、新しい顧客にリーチするための最善の選択肢は、柔軟性です。

オンラインおよびオフラインでさまざまな連絡先オプションを提供します。 あなたのビジネスに連絡し、あなたのサービスを使用することはスムーズで痛みがないはずです。 これは、追加のニーズを持つ顧客だけでなく、すべての顧客に利益をもたらします。

2.圧倒的な顧客を避ける

ある程度の動きのあるコンテンツはサイトをポップにするのに役立ちますが、多すぎると不安を誘発し、圧力をかける可能性があります。 不安神経症、自閉症、ADHDなどのメンタルヘルスのニーズを持つユーザーにとって、これらの問題は特に適切です。

WCAGには、コンテンツの移動に関する明確なガイドラインがあります。 コンテンツの移動（GIF、ニュースフィードのスクロールと自動更新など）は、自動的に開始され、5秒以上続き、他のコンテンツと並行している場合、一時停止メカニズムを備えている必要があります。

視聴者によっては、前述の自動再生コンテンツをすべて検討することをお勧めします。 Webサービスに慣れていない可能性のある古い顧客について考えてみてください。

感動的で時間に敏感な情報が多すぎると、不快で圧倒されます。

最近の多くのサイトでは、サイトに入るとすぐにライブチャットポップアップが表示されます。 これには、簡単にアクセスできる連絡ツールとしての利点があります。 ただし、Webサイトを使用するたびにすぐにメッセージが表示されると、イライラする可能性があります。

ポップアップの代わりに、目立たない位置に折りたたみ可能な標識付きのライブチャットオプションを配置することもできます。 顧客が到着したらすぐに顧客との接触を強制することは、非常にプレッシャーになる可能性があります。

これは、会社でのテキストメッセージングアプリの使用にも当てはまります。 通知で顧客を氾濫させないでください。

3.明確なタイポグラフィを使用する

WCAGはタイポグラフィ要件について明確です：

• テキストを左揃えまたは右揃えにします（位置合わせされません）
• 行と段落の間隔は少なくとも1.5倍にする必要があります
• 段落の最大幅は80文字です

これらのガイドラインを常に遵守する必要がありますが、さらに進んでより多くの顧客に利益をもたらすことができます。

クリアでサンセリフフォントを使用し、適切なサイズで、背景色を対比させます。 言語は、顧客をひいきにすることなく、シンプルで直接的でなければなりません。

顧客調査を利用して、顧客がWebサイトに何を期待しているかを判断します。

もう1つの重要な懸念事項は、画像内のテキストです。 これは可能な限り避けるべきです。

目の不自由なユーザーや視覚障害のあるユーザーは、スクリーンリーダーソフトウェアを頻繁に使用します。 これらのプログラムは画面上のテキストを読み上げますが、画像をデコードすることはできません。

したがって、テキストが画像内に「隠されている」場合、顧客は重要な情報を見逃す可能性があります。 視覚障害のある顧客が、サイトへのアクセスが制限されていると感じないようにすることが重要です。

4.画像にアクセスできるようにする

もちろん、画像は依然として優れたWebデザインに不可欠です。 そして、逆に、他の顧客のアクセシビリティを高めることができます。

失読症などの読解障害のある人にとって、関連する画像はテキストの理解を向上させることができます。 商品ページなど、サイトの一部の領域では、ほぼ確実に画像が必要になります。

スクリーンリーダーのユーザーが画像にアクセスできるようにすることもできます。 サイトのすべての画像に代替テキストを含める必要があります。 これは、カーソルで画像にカーソルを合わせたときに表示されるテキストです。

また、画像自体を表示できないスクリーンリーダーによっても読み取られます。 適切な代替テキストは、表示された画像を明確かつ正確に説明します。

HTMLを使用して代替テキストをWebサイトに簡単に重ねることができます。 代替テキストを含めることは他のユーザーを混乱させることはなく、スクリーンリーダーを使用するユーザーに大きな利益をもたらします。 代替テキストとアクセシブルイメージも、検索エンジンのランキングに役立ちます。

代替テキストとは別に、画像自体がアクセス可能に表示されることが重要です。 WCAGの目的のために、色のコントラストは比率として測定されます。 この比率を測定するために使用できるアプリやブラウザ拡張機能はたくさんあります。

装飾用の付随的な画像にはコントラスト要件はありませんが、背景上のテキストのコントラスト比は4.5：1である必要があります。 グラフなどのグラフィックアイテム、およびクリック可能なアイコンなどのUI要素には、3：1の要件があります。

最後に、20人に1人が色覚異常です。 これらのユーザーにとって問題となる可能性のある色の組み合わせを考えてください。

色覚異常にはさまざまな種類があります。 アプリを使用して、色覚異常のユーザーにWebサイトがどのように表示されるかをシミュレートできます。 さらに良いことに、色覚異常やその他の視覚障害のある人に連絡して、サイトの使いやすさを確認してください。

5.タッチスクリーンのアクセシビリティを確認します

デスクトップサイトが「デフォルト」であると信じる罠に陥りがちです。 スマートフォンやタブレットの利用は、その利便性から、すべてのユーザーの間で増え続けています。 これらのデバイスは、一般的にラップトップやデスクトップよりも手頃な価格です。

低所得ユーザーへのサイトのアクセシビリティを考慮し、モバイルサイトに注意を払ってください。

タップとスワイプは簡単で直感的である必要があります。 リンクの目的は明確である必要があり、誤タップを最小限に抑えることを目指す必要があります。

指はカーソルよりもはるかに大きく、ユーザーの画面の表示を覆い隠すことに注意してください。 これは、適切なサイズの適切な間隔のボタンを使用して行うことができます。 WCAGは、44 x44ピクセルのボタンサイズを義務付けています。

タッチスクリーンの最適化により、顧客の物理的なニーズを考慮してください。 障害は、顧客の身体的器用さやスタミナが限られていることを意味する場合があるため、長時間または過度に複雑なタッチ要件を避けてください。

ズームや回転に必要なことが多い「つまむ」ジェスチャは、健常なユーザーにとっても負担になる可能性があります。 代わりに、タップ可能なズームボタンが必要な場合があります。これは、顧客の快適さを気にかけていることを示す優れたサインです。

6.ユーザー入力が簡単であることを確認します

これは、タッチスクリーンのアクセシビリティの領域と密接に関連しています。

Webサイトのフォーム（注文、連絡、アカウントの設定など）は、顧客にとって簡単なものでなければなりません。 すべてのボックスに必要な入力が明確にラベル付けされていることを確認してください。

プレースホルダーをボックスに入れて、顧客が何を入力する必要があるかを例示することもできます。 たとえば、[emailprotected]のようなプレースホルダーのメールアドレス

最もアクセスしやすいデザインであっても、人為的ミスの余地は常にあります。 あなたのウェブサイトが入力エラーに寛容であることが重要です。 顧客に間違いを愚かに感じさせないでください。そして、間違いを簡単に修正できるようにしてください。

最良の方法は、エラーをリアルタイムで強調表示することです。これにより、顧客は長いフォームをスクロールして戻る必要がなくなります。 エラーを表示するために色だけに頼らないでください。 視覚障害のあるユーザーはこれにアクセスできない場合があります。

エラーメッセージをわかりにくくするのではなく明確にし、送信する前に最終チェックのオプションを顧客に提供します。

エラーに対する許容度は、Webサイトのアクセシビリティを向上させるだけではありません。 それはまた、顧客があなたとの取引のあらゆる段階でサポートされていると感じさせます。

フォームを直感的で包括的なものにすることは、顧客の経験に関心を示すことで、顧客との信頼を築くことができる多くの方法の1つです。

7.有益なシンプルさを目指す

情報を送信することは、あなたのサイトを使用するすべての人に明らかに利益をもたらします。 これは、学習障害または読書障害のある人、視覚障害のあるユーザー、障害のないユーザー、およびあなた自身のスタッフを支援します。

Webサイトの明確な情報は、説明クエリの数を減らすことにより、カスタマーサービスチームへのプレッシャーを軽減します。

段落は短くし、語彙は必要以上に複雑にしないでください。 顧客が理解する業界固有の用語を使用することを躊躇しないでください。ただし、WebサイトはSATの語彙を柔軟にする場所ではありません。

可能な限りあいまいさを排除します。 あなたの正確な意味は常に明確でなければならず、あなたのサイト上のリンクの機能は正確にラベル付けされるべきです。

顧客にとって最も重要なことを強調する最小限のデザインを目指します。

8.一貫性を維持する

一部の障害のあるお客様にとって、変更は不快感を与える可能性があります。 あなたのブランドが進化するにつれてあなたのウェブサイトを更新することは問題ありませんが、頻繁な不必要な変更はどんな顧客も捨てる可能性があります。

あなたのブランドアイデンティティが絶えず形を変えているように見えるとき、あなたの顧客はあなたを信頼する可能性が低くなります。

カスタマーサービス側でも一貫性を維持する必要があります。

ソフトウェア定義ネットワークなどのソリューションは、まとまりのあるサービスを維持するのに役立ちます。 フレンドリーでオープンなトーンを維持して、すべての顧客がサポートされていると感じられるようにします。

一部のお客様は、情報をより頻繁に繰り返す必要がある場合があります。 CSチームはこれに備える必要がありますが、情報にアクセスしやすくすることも検討する価値があります。

色のコントラストや代替テキストなどのアクセシビリティ機能は、Webサイトのすべての領域で一貫している必要があります。

障害のあるユーザーにまったく異なるバージョンのサイトを提供したくなるかもしれません。 ただし、これは別の問題である可能性があり、これらの顧客に負担を感じさせます。 代わりに、すべての顧客の利益のために、アクセシビリティをゼロからサイトに統合します。

9.サイトをスムーズに保つ

もう1つのアクセシビリティの問題は、誰もが高速インターネットや強力なハードウェアにアクセスできるわけではないという事実です。

地方の顧客、発展途上国の顧客、または低所得の顧客は、あなたのウェブサイトに問題を抱えている可能性があります。

ユーザーがビデオなどのデータを食べるコンテンツを表示するかどうかを選択できるようにサイトを設計します。 これらの顧客に利益をもたらすためにあなたのウェブサイトの遅れを減らす多くの方法があります。

繰り返しになりますが、顧客がどのようにWebサイトにアクセスしているかを考えてみてください。

使用しているデバイスと使用している地理的領域について考えてください。顧客はWebサイトをどのように表示しても、楽な体験を楽しむことができます。 あなたはあなたの顧客にあなたのサイトを使うのが面倒な仕事だと感じてほしくない。

苛立たしいエラーを減らすために、タイトで高品質のコーディングを確保してください。 タスクを実行するときに顧客がクリックする必要のあるページ数を減らすようにしてください。

フォームはできるだけ少ないページに保管してください。 特に接続が不十分な場合は、新しいページが数秒ごとに読み込まれるのを待つことを好む人は誰もいません。

10.ウェブサイトのデザインで視覚的な階層を作成する

最高のサイトデザインの多くに共通するスレッドは、明確な視覚的階層です。 これは、ナビゲーションが簡単であり、ユーザーがさまざまなタスクに対してどの手順を実行する必要があるかが明らかであることを意味します。

あなたはあなたのウェブサイトの顧客の使用を分析し、最も使用されている機能を前景にすることができます。 「タイリング」は簡単に圧倒され、特に明確ではないため、避けてください。

色や形などのデザインの選択肢を統一するとともに、関連する機能をグループ化できます。 ただし、これらの機能だけに依存するべきではありません。 説明したように、それらにはアクセスできない可能性があります。 スクリーンリーダーの目的で、テキストも使用します。

視覚的階層の目的は、顧客がWebサイトをより迅速かつ簡単に使用および閲覧できるようにすることです。

デザインの選択を使用して、顧客をWebサイトの関連セクションに誘導します。 顧客のニーズを理解し、顧客にとって最も重要なことを強調します

包括性に関する最後の言葉

最終的に、アクセシビリティと包括性の背後にある哲学は、障害のあるユーザーは他のユーザーと同じように価値があるということです。 これは当たり前のように思えるかもしれませんが、驚くほど多くのブランドがWebサイトのデザインでこれを実践できていません。

すべての顧客が良い経験をすることを確実にするためにさらに一歩進んで、あなたの基盤に信頼と忠誠を築きます。 あなたの顧客はより幸せになり、あなたは本当に気遣うビジネスとして際立つでしょう。

著者略歴

John Allenは、グローバルUCaaS、VoIP、および自動ダイヤラーソフトウェアプロバイダーであるRingCentralのグローバルSEOディレクターです。 彼は14年以上の経験があり、デジタルマーケティングプログラムの構築と最適化に幅広いバックグラウンドを持っています。 彼はVaultや3DCartなどのWebサイト向けに執筆しています。