優れたデザインがウェブサイトのアクセシビリティに与える影響

アクセシビリティの広大な分野への出発点をお探しですか？ より多くのユーザーにデジタル製品を包括的に提供することでデジタル製品を改善するために、設計プロセスに実装できる実際のプラクティスとツールについて詳しく説明します。

アクセシビリティとは何ですか？

アクセシブルなWebサイトにより、さまざまなユーザーがWebサイトのコンテンツをスムーズに利用できるようになります。 UIまたはUXの観点からトピックに取り組んでいるかどうかにかかわらず、焦点は、多様なオーディエンスに適した高品質の製品を作成することにあります。

この多様な聴衆は、「永続的、一時的、または状況に応じた障害を経験しているすべての人に広がります。たとえば、片方の腕だけが永続的な状態であり、負傷した腕が一時的であり、片方の腕に赤ちゃんを抱くのは状況に応じたものです。ユーザーは片手でタスクを完了することができます。」 （Avinash Kaur、2018年）。

アクセシビリティが重要なのはなぜですか？

設計者として、状況、能力、またはコンテキストに関係なく、すべてのユーザーがアクセスできる方法で設計することを確認するのは私たちの責任です。 その結果、ウェブは、認知障害、視覚障害、身体障害のいずれであっても、すべての人が参加できるスペースになる可能性があります。

アクセシブルなウェブサイトを作成するために、多額の予算や変更を必要としません。 追加の機能やコンテンツを必要としないため、設計プロジェクトの開始時に教育と認識を通じてアクセシビリティを実現できます。

また、ビジネスにとっても間違いなく重要です。調査によると、アクセス可能なWebサイトは検索結果が向上し、より多くのユーザーにリーチし、SEOに対応し、ダウンロード時間が短縮され、優れたコーディング手法が促進され、常に使い勝手が向上します。

どうすればアクセシビリティを実現できますか？

さまざまな能力、年齢、デバイスの経験レベルに合わせて設計するために、特定の調整を行い、フレームワークに従う必要があります。

アクセシビリティは、デジタル製品に適合するように絶えず進化している独立した分野です。 しかし同じように、ソフトウェアソリューションも成長しています。 つまり、このトピックのすべてを網羅することはできませんが、この記事が役に立ったら、パート2を実行できます。

5つの大きな領域について深く掘り下げます。

1. 色のコントラスト
2. 代替テキスト
3. フォーカス状態
4. フォーム
5. タイポグラフィ

色のコントラスト

テキストと背景の間に十分な色のコントラストがあることを確認すると、視力に苦しんでいるユーザーに役立ちます。 これは予想よりも多くのユーザーに影響を及ぼし、問題として無視されることがよくあります。 しかし、12人に1人の男性が色盲であり、他の多くの男性は視力が弱いか盲目です。

まず、アクセシビリティガイドラインでは、情報を伝える方法は色だけではないことが定められています。 言い換えれば、色を異なって認識し、色ベースの指示を見逃す可能性があるユーザーのために、追加の手がかりが必要です。

テキストと背景の適切なコントラストを維持するために、従うべき適切な比率は最低4.5対1です。これにより、視力や色覚異常の低いユーザーが2つを区別できるようになります。

4.5対1のコントラスト比は、適合レベルAA（A、AA、AAAの3つのレベルのうち）に準拠していますが、これはフォントサイズと達成したい適合レベルに基づいて変化します。 タイプが18ポイント（または太字で14ポイント）の場合、フォントが大きいほど、必要なコントラスト比は3対1と小さくなります。

これらの最小比率は、ロゴまたはブランド名内のテキストには適用されませんが、この便利なツールを使用して、コントラスト比を自分で確認すると便利です。

代替テキスト

スクリーンリーダーを使用してWebにアクセスするユーザーの場合、表示されるコンテンツが常に正しく伝達されるとは限りません。 代替（代替）テキストは、スクリーンリーダーがページ上の画像をユーザーに通知するために使用するものです。

これは、代替テキストを点字、音声ガイドに変換するか、テキストを視覚的に読むことによって行うことができます。 これは、画像を見ることができない人のために、画像で何が起こっているかを正確に説明することが重要であることを意味します。

代替テキストを追加する必要がない場合もあります。 たとえば、画像の周囲に十分なコンテキストインジケータがある場合や、画像に美的以外の機能がない場合があります。

フォーカス状態

あなたはおそらく気づかずにすでにフォーカスインジケーターに精通しているでしょう。 フォーカス状態は、リンク、メニュー、ボタン、フォームフィールドなど、要素が選択されたときに表示される（多くの場合）青いアウトラインです。

これらは、キーボードを使用するときにユーザーが現在どの要素に焦点を合わせているかを示します。 多くの場合、これらの指標は見苦しい、または目的を果たさないように見えますが、実際には非常に重要です。 多くのユーザーはキーボードのみの使用に制限されており、スクリーンリーダーを使用する視覚障害者もページナビゲーションを支援するためにフォーカスインジケーターを必要とします。

フォーカスインジケーターは、ページナビゲーションを明確にし、アクセスしやすくするための簡単な方法です。わずかな労力で、ユーザーにとって大きな違いがあります。 適切な色を使用してシームレスにブランドに結び付けることができます。要素を際立たせるには、コントラストを付ける必要があります。

フォーム

フォームは誰にとっても複雑になる可能性がありますが、追加のアクセシビリティの問題があるフォームは、フォームがミニマリストで不明確すぎると、しばしば苦労する可能性があります。 以下に、アクセシビリティに取り組むために対処する必要のあるいくつかの一般的な項目を示します。

• ラベル–フィールド外のテキストではなく、プレースホルダーテキストをラベルとして使用すると、ユーザーが入力を開始するとテキストが消えるため、混乱が生じます。 ミニマリズムや美学を支持してユーザーの重要な指示を省略することは、避けるべき大きな誤りです。
• 境界線–テキスト入力の周囲の境界線のような単純なものは、認知障害のあるユーザーにとって重要であるため、クリックする必要がある場所が明確です。
• 追加の指示–多くの場合、フォームはデザインを整理するために最小限のアプローチを使用しますが、これは使いやすさ、したがってアクセシビリティを妨げます。
• エラーメッセージ–これらは複数の要素で示される必要があり、通常は色が使用されますが、このエラーに加えて、記号またはテキストで示される必要があります。
• レビュー–フォームは、ユーザーが情報を修正できるように、送信前にレビュー期間を設ける必要があります。

タイポグラフィ

情報が散らかっていなくて、1つのスペースに多すぎると、情報を消化しやすくなります。 これは、アクセス可能なWebサイトにも当てはまります。 前述のように、フォントサイズによってコントラスト比の最小要件が変わる可能性がありますが、フォントサイズは10ポイントを下回ってはなりません。

ご覧のとおり、9ポイントで読むのは難しいです。

テキストの両方の行と個々の単語の間の空白の量を増やすと、視覚障害のあるユーザーや失読症のユーザーに役立ちます。 次の最小間隔により、これらのユーザーの要件が確実に満たされます。

• 文字間隔：フォントサイズx0.12
• 単語間隔：フォントサイズx0.16
• 行間隔：フォントサイズx1.5
• 段落の間隔：フォントサイズ×2

結論

驚いたことに、これらの小さな変更はアクセシビリティに大きな違いをもたらす可能性があります。 あなたのウェブサイトをウェブコンテンツアクセシビリティガイドラインに適合させるのに多額の予算と多くの時間を必要としませんが、それはユーザーの体験を劇的に変え、それゆえあなたのビジネスも後押しすることができます。

これらの提案をデザインプロセスに追加することは、第二の性質となり、よりアクセスしやすいWebサイトの未来への道を開くことができます。それはデザイナーとしての私たち次第です。

クリエイティブについてサポートが必要な場合は、遠慮なくお問い合わせください。