Webデザイナーは、広く受け入れられているベストプラクティスを利用して仕事を進めます。たとえば、レスポンシブデザインや十分な余白の確保、クライアントのブランディングに合わせたフォントやカラースキームなどです。しかし、ベストプラクティスだと思っていたものまったくの誤りであることもあります。そのような場合には、特定のニッチなプラクティスがあります。このニッチなプラクティスは、視覚障害者に対する効果的なデザインやアクセシビリティについて考えるときに利用することができるでしょう。
この記事を読む前は、視覚障害者というユーザー層を考慮したことがなかったかもしれません。しかし、すべての人が利用できるWeb体験を作り出すことは、自分のメッセージを広めるだけでなく、ある種の障害と闘う人々にとってより住みやすい世界を作るためにも重要です。
また、視覚障害はあなたが考えているよりもはるかに一般的なものです。人口のうち推定4.5％は色覚異常を経験し、4％は弱視と闘い、そして0.6％は法律的に盲目と見なされています。このように視覚障害はありふれたものなので、Webデザインに取り組む上で考慮する価値は十分にあります。
Smashing Magazineの著者は、見やすいデザインはオンライン顧客全体の約10%に役立つと推定しました。歳をとるにつれて我々にも視覚障害の影響が生じるかもしれないということを考慮すれば、これは正しい仮定のように思えます。
もっとも一般的な視覚障害の種類
視覚障害者向けのデザインをする上で、もっとも一般的な障害の種類に対処することが重要です。一般的な視覚障害の種類は以下の通りです。
-
色覚異常。もっとも一般的な視覚障害で、色を識別する能力に影響をきたします。色覚異常の人は、色の明るさにも敏感である場合があります。
- 弱視。片目または両目の視力低下、視野狭窄、視界のぼやけ（白内障が原因のものなど）に苦しむ人が含まれます。
- 盲目。法律上では盲目と見なされるが、まだ色や形を見分けることができる人を指します。両目の視覚機能が著しく失われている場合が含まれます。
視覚障害者向けのデザイン
まず重要なのは、視覚障害者はWebの知覚の仕方が異なるということです。色覚異常や弱視、盲目の人々は、機能の利用方法や解釈の仕方の違いが著しいです。場合によっては。Webサイトのデザインがサイトを視覚障害者にとって使うことのできないものにしてしまっている可能性があります。
次に、ある場合においては、法律によってすべての人が利用できるWebサイトにすることを義務付けられます。公共部門では米国リハビリテーション法第508条、民間部門ではWCAG 2.0という２つの指令書があります。
米国政府の機関、請負業者または下請業者である場合には、第508条のルールに準拠する責任があります。第508条は法的な命令ですが、WCAG は違います。しかし、WCAGを守ることで、ユーザーが平等にWebサイトを利用できることに繋がります。
色のコントラスト
WCAGにおいてもっとも重要で、かつ一番簡単な勧告は適切な色のコントラストをもたせることです。WCAGによると、色のコントラストには３つの適合レベルが存在します。
- A：最低レベル
- AA：中間レベル
- AAA：最高レベル
多くのWebデザイナーは、大部分の人に有効なAA基準達成のためのアクセシビリティに関心があります。AA基準は、前景（画像や文字）と背景の間のコントラスト比が4.5：１以上となります。参考までに4.5：１の例をご覧ください。
色のコントラストを調整することで、簡単に視覚障害者の使いやすさを改善できます。より強いコントラストが必要な人々には、コントラストをさらに強くできる機能を設定に追加することを検討しましょう（Twitterは最近、最新版でこれを実行しました）。
色に頼り過ぎない
色のコントラストは重要ですが、「情報を伝える、唯一の視覚的手段」（WCAGのガイドライン1.4.1）にあるように色を使用しないことも同様に大切です。別の言い方をすれば、色覚異常に苦しむ人のために予備のビジュアルインジケーターを用意しましょう。
簡単な修正のように聞こえますが、余白とコンテンツを適切に組み合わせることの難しさは、やってみるとわかるでしょう。UIから邪魔なものを取り除こうとするとき、そのバランスを見極めるのには試行錯誤を要するかもしれません。
その良い例が、フォームのエラーです。フォーム送信時のエラーを伝達する際、一般的に赤い文字を使用します。しかし、色覚異常の人には、エラーアイコンやテキストラベルのポップアップ表示など、別の視覚的合図が必要かもしれません。
出典：GetBootstrap.com
同様に、ハイパーリンクの青色は、テキストがリンクであることを示します。しかし、大量の下線が引かれたリンクはユーザー体験に影響をきたすかもしれません。その一方で、太字にすることはページを見づらくすることなく補助的なインジケーターとして機能します。
メディアを考慮する
ビデオコンテンツは、アクセシビリティに関する絶好の機会であると同時に、課題でもあります。オーディオビジュアルコンテンツはWebサイトを視覚障害者にとってさらに使いやすくする一方で、ビデオは光過敏症の人の発作を起こしやすくする可能性もあります。WCAGには、以下のようなメディアの取り扱いに関するガイドラインがいくつか存在します。
- 時間ベースのメディアには代替案を提供する。動きのあるヘッドラインやテキストは、視覚処理に問題のある人々にとって理解するのが困難かもしれません。
- すべてのユーザーにコンテンツを読む時間を十分に与える。前述の例でいうと、動きのあるヘッドラインにマウスを重ねたときに、動きが止まるようにプログラムします。これにより、テキストの動きが静止してわかりやすくなります。
- 点滅を制限する。光過敏症の発作を起こしやすい人は、３秒に１回以上の点滅を見ると発作が起こる傾向があります。ビデオを使う際には、大半の人にとっても視覚的に魅力的ではない過度な点滅の使用は避けましょう。
テクスチャを試す
前述の通り、視覚障害者にとって色は最善の情報伝達手段ではありません。色覚異常のユーザーは、色合いを見分けるのが困難である場合が頻繁にあります。たとえば、赤、緑、茶色の色調は色覚異常の人にとって同じに見えることがあります。
グラフやチャートで色を使う場合、無地にパターンを重ねることでユーザーはWebサイトのパーツの区別がつきやすくなります。これは色覚異常の人に限らないので、すべての人が使いやすいサイトに繋がります。要素間のコントラストをより強くするための代替テクスチャとして、市松模様、対角線、ダイヤモンド、縦線などが利用できます。
単色のカラースキームを利用する
その名の示す通り、単色のカラースキームは、濃さの異なる同一色相に依拠します。これは直感に反しているように聞こえますが、複数の色調を使うことで生まれる余分な意味を取り除くことで機能します。
多様な色調を用いることで、まるで違う色を使ったかのようにWebサイトの要素に意味を持たせ、ユーザーの注意を引きます。さらに付け加えるなら、もっと幅広い閲覧者の注目を集めることができます。BigSound Buzzはコントラスト、単色のカラースキーム、テクスチャを使用することで、アクセシビリティのより大きな効果を実現しています。
ユーザーデザインにおけるアクセシビリティの重要性
出典：Interaction-Design.org
Webサイトの良し悪しはアクセシビリティによって決まります。つまり、アクセシビリティとは、どんなユーザーでも、どんな場所にいてもアクセスが可能であるということです。私たちはアクセシビリティと障害を同じものと考えがちですが、使いやすい優れたWebサイトは、いつどんな環境においても、すべての人が利用できるものです。政府の請負業者などのWebデザインでは、アクセシビリティが法的義務にあたる場合があります。
それ以外の人にとって、アクセシビリティは道徳的責任にあたります。アクセシビリティは身体障害者や機能障害者だけでなく、すべての人に関係することです。デザイナーはこの考えを受け入れて、Webをあらゆる人にとってさらに優れた体験にする必要があります。アクセシビリティを念頭に置いた次のWebデザインプロジェクトに着手するとき、このアドバイスが役に立つでしょう。より詳細な情報およびガイダンスについては、WCAG 2.0 ガイドラインをご覧ください。
