Webアクセシビリティ101：すべての人のためのデザイン

Webデザインはアクセシビリティに関するものです。 ほとんどのWebデザイナーは、オーディエンス内の最大の人々のために製品を作成することを目指しており、ギャップのあるネットのようにデザインをキャストして、ユーザーの最大の流入を生み出しています。

そして、その設計原則には論理がありますが、それはやや単純でより包括的な原則を覆い隠しています。ほとんどの人ではなく、すべての人のための設計です。

コンテンツを最適化して、すべての可能なユーザーがWebサイトを楽しんで操作し、利用可能な情報やデータにアクセスできるようにします。 この実践に従事することは、より広い市場を開拓し、顧客基盤を多様化するのに役立ちます。 世界の人口の15％がある程度の障害を持っています。

これらは、他のすべての人と同様に、インターネットを頻繁に使用し、デジタル通信とツールに大きく依存している人々です。 ユーザーが優れたエクスペリエンスを楽しめるようにWebサイトを最適化すると、Webサイトのインタラクションを拡大できます。 デザインにインクルージョンを実践することで、見過ごされがちな何百万人もの人々にリーチできるようになります。

アクセシビリティのための設計は難しいことではありません。 シンプルで、すべての潜在的なユーザーに配慮する必要があります。 アクセシビリティを最大化するためにWebサイトを最適化する方法は次のとおりです。

ユーザーを理解する

どのプロジェクトでも視聴者を知ることは非常に重要なので、始めるのに最適な場所です。 ユーザーにはさまざまな機能を持つ個人を含めることができることを理解してください。 一部のユーザーは聴覚障害または視覚障害を持っている可能性があり、他のユーザーは発作障害を持っている可能性があり、他のユーザーはまだ可動性の問題を抱えている可能性があります。

考えられるすべてのシナリオに合わせて設計することはできませんが、できるだけ多くのことを考える時間をとれば、設計の範囲が広がります。 拡大したオーディエンスについて考えた後、調査を行います。 ケーススタディを読み、経験のある友人と話し、アクセシビリティガイドを参照してください。

たぶん教育分野からページをとってみてください、ユニバーサルデザインの原則は良い参考資料です。

UXを考える

将来のユーザーとの理解を深めたので、その理解をユーザーエクスペリエンス（UX）フレームワークに取り入れます。 この手順は、ユーザーに共感し、これまで考えたことのないことを検討するのに役立ちます。 また、さまざまな支援技術の定義の方向性を示します。

設計者がすべての主要なブラウザでのWebサイトの動作を考慮する必要があるのと同様に、支援技術は機能チェックリストの一部である必要があります。 場合によっては、Webデザインのわずかな変更でさえ、障害のあるユーザーに新しい扉を開くことができます。

簡単な変更

たとえば、実装するのにおそらく最も簡単な変更は、強調タグの使用方法です。

視覚的には、 <b>と<strong>の間に違いはなく、 <i>は<em>と同じように表示されます。 しかし、障害を持つ人々にとって、これらのタグはユーザーエクスペリエンスを大幅に変える可能性があります。

それらは同じ、効果的に太字で斜体をレンダリングしますが、これらのタグの違いはそれらの機能です。 より単純な太字と斜体のタグは表現的ですが（テキストのレンダリング方法を変更します）、強く強調されていることは、支援技術のさまざまな音声パターンを示しています。

しかし、すべての<b>をやみくもに<strong>に置き換えるほど簡単ではありません。 たとえば、多くのヘッダーは対比のために太字のテキストを使用していますが、障害を持つユーザーがここで<strong>タグを使用するのはおそらく最善ではありません。 「ユーザーがその完全な意味を体験するには、このテキストを別の方法で話す必要がありますか？」と考えてください。 そうでない場合は、本当に必要でない限り、 <strong>または<em>を削除することを検討してください。

このような微妙な変更や考慮事項は、障害を持つユーザーにすべての違いをもたらす可能性があります。 UXをダウングレードするのではなく、アップグレードすることが重要です。

視覚障害者のためのデザイン

上記のアドバイスはすでに視覚障害者に利益をもたらしていますが、視覚障害を持つすべての人が同じ障害レベルまたはタイプを持っているわけではありません。 視力を維持している人に対応できるオプションを提供することも同様に重要です。

次の要素を考慮してください。

• ユーザーがフォントを拡大できるようにします。 ほとんどのブラウザはあなたの同意の有無にかかわらずこれを行いますが、CSSを準備しておけば見栄えが良くなります。
• 赤と緑、青と黄色などの特定の色の組み合わせは避けてください。 代わりに、アクセシビリティを高めながらコンバージョンを増やすために色を使用してみませんか？
• 「代替テキスト」でコーディングします。 代替テキストは支援技術によって読み取られ、ページ上のグラフィックを説明できます。
• よく知られている場合でも、略語でピリオドを使用します。 スクリーンリーダーが情報を処理する方法は、多くの場合音声です。「Fibby」とFBIの聞き取りを想像してみてください。

視覚障害のあるユーザー向けの要素を組み込む方法の詳細については、米国盲人協会をご覧ください。

聴覚障害者のための設計

聴覚障害者は必要な宿泊施設が少なくなっていますが、Webサイトでのビデオ使用の最近の傾向により、スマートなデザインの選択の必要性が高まっています。 したがって、Webサイトに聴覚コンポーネントが組み込まれている場合は、クローズドキャプションまたは手話通訳を使用してください。

自動クローズドキャプションを使用する誘惑を避けてください。自動文字起こしを使用して処理されたランダムなビデオに立ち寄って、意味がなく、数え切れないほどの単語の翻訳を確認してください。

具体的なキャプションのガイドラインについては、全米ろう協会の推奨事項がここにあります。

光過敏性てんかんのデザイン

ビデオ、特に自動再生機能を使用するビデオの一般的な使用に関する設計上の懸念の1つは、光過敏性てんかんを患っているユーザーを取り囲んでいます。 これらのユーザーは、ストロボライトタイプの効果や動画によって引き起こされる発作を体験できます。 Webデザイナーは、光過敏性てんかん分析ツールを使用して、コンテンツが発作を引き起こす可能性を確認できます。

コンテンツがリスクがあると識別されたが、リスクを減らすために変更できない場合は、常にその可能性について警告し、ビデオを自動的に再生しないでください。 警告が表示され、再生ボタンの近くにあることを確認してください。

運動障害のための設計

いくつかの運動障害は、細かい運動制御の完全な喪失から軽度の震えにまで及びます。 どちらのレベルの障害でも、それらを考慮していないWebサイトで同じユーザーエクスペリエンスが得られます。

• ユーザーはリンクに到達するためにより多くの努力を払う必要があり、すぐに疲れる可能性があります。
• キーボードの使用が許可されていないため、ユーザーはWebサイトをナビゲートできません。
• 長いページをスクロールしなければならない場合、「トップに戻る」またはスキップするオプションが利用できないため、疲労が生じます。

タッチスクリーンまたは細かいマウス入力用に最適化されたサイトは、モビリティ障害に対してより深刻な結果をもたらす可能性があり、サイトが使用できなくなる可能性があります。

キーボードを使用して操作できるナビゲーションや、ページのさまざまなセクションにユーザーを引き付けることができる頻繁なアンカーリンクなどのデザイン要素を組み込むことは、これらのユーザーを支援するのに大いに役立ちます。

「基本的な」ウェブサイトオプションを作成する

あなたのデザインは完璧で、インタラクティブで、印象的で、公開市場で入手可能な最新かつ最高のトレンドを使用しています。そして、上記のユーザーはほとんどアクセスできません。

それがWebデザインのように聞こえる場合、より簡単な代替手段は、ユーザーがオンとオフを切り替えることができる「シンプルな」レイアウトを作成することです。 これは、障害のあるユーザーだけでなく、他のユーザーにもアピールします。たとえば、コントラストの高い片頭痛に苦しむユーザーにとって、アクセスしやすいトグルを持つことは、顧客になるか、3時間の片頭痛と戦うために去るかの違いになります。

そこにとどまらないでください。 サブスクリプションリストに同じオプションを適用して、ユーザーが電子メールマーケティングを受信する前に自分の設定を簡単に編集できるようにします。

さまざまなユーザーを理解し続けてください。 それらについて考え続けてください。 ユーザーを理解し、共感するほど、アクセスしやすいUXデザインになります。 知るか？ あなたも誰かの世界を変えるかもしれません。