体験をデザインしている立場として、私たちはインターネットが目の不自由な人を含むすべての人の生活の一部であるということを覚えておかなければなりません。
世界保健機関によると、視覚障害者は世界中で2億8500万人います。これら2億8500万の人々もインターネットへのアクセスを必要としており、誰もが得られる情報を同じように利用できるべきです。
多くの人々は、目が不自由な人はインターネットを使わないだろうと考えますが、それは間違いです。
この見解を心に留めてサイトをデザインすることは、非常に重要です。また、視覚障害者が利用可能なサイトをデザインすることは、そうでない人々にとっても役立つ可能性があります。では、どのようにすれば良いのでしょうか？ この記事ではWebサイトにおけるアクセシビリティのコツをいくつかご紹介します。
1. 色のコントラストに頼らない
眼病の種類によっては、色のコントラストに対する感度の低下を引き起こすものがあります。近年のデザインの多くが細かいディテールで構成されており、淡い色を使用してクリーンでモダンなインターフェイスでデザインされています。
これは、視力が1.0あるようなの人にとっては素晴らしいデザインです。しかし、色の識別が苦手なユーザーにとっては淡い色の認識が難しいのです。明るい灰色の背景に白いフォントを使用すると格好良く見えるかもしれませんが、ユーザーによってはそこにテキストがあるかさえわからない可能性があります。
メッセージや情報を伝える唯一の手段を色に頼ってはいけません。色だけを使って何かを示すのではなく、色は既に目に見えている情報を強調する用途として使うほうが良いでしょう。
Web上の多くのフォームフィールドは、色を使ってエラーがあることを示します。色が見えないと、どこにエラーが起こっているのかわからないことがあるでしょう。アクセシビリティのためには、色とシンボル付きのエラーメッセージをペアで使う必要があります。
2. 見やすいフォントのサイズと太さにする
モダンなデザインフォントにはきれいで細いものが多くあります。軽量なフォントは美しいですが、目の不自由な人たちにとってはあまり見やすいものではありません。フォントサイズは少なくとも12ptを維持することが重要です。それより小さいテキストだと、コンテンツを読むことが難しくなるでしょう。
フォントと色の選択は、サイトにおけるUXの中で大きな違いを生む可能性があります。新しいフォント、フォントサイズ、およびウエイトで試してみましょう。それがサイトを訪れる誰もにとってより良い体験を提供することに繋がるかもしれません。
3. 記事を音声化する
サイトがコンテンツ主導の場合、コンテンツを聞けるようにすると、サイトに大きな価値を与えることができます。
冒頭でも述べましたが、これはすべての人にとって有益となり得ることなのです。例えば、座ってニュースを読む時間がない忙しい親たち、トレーニング中のながら読みなどは許容できない運動マニア、もしくは徒歩30分かけて職場に通勤する従業員たちなどにも有用なのです。
NPRのサイトからのスクリーンショット。ユーザーが記事を「再生」できます
Npr.comはこれを非常にうまく取り入れています。サイトで「再生」押して記事を聞くことが可能になるうえ、ユーザーは新しい記事を再生待ちリストに追加することもでき、現在聞いている記事が終わると続けて新しい記事が再生されるようになります。
4. スクリーンリーダーに対応する
スクリーンリーダーは、視覚障害者がサイトのコンテンツを読み取れるようにするソフトウェアプログラムです。
サイトには、スクリーンリーダーが読み取ることのできない箇所がたくさんあります。もし画像の中のテキストが画像と関連性のないものだった場合、スクリーンリーダーはユーザーにその内容を伝えることができないでしょう。実際には、スクリーンリーダーは画像を読み取ったり理解することができないので、画像のタグに記載されているalt属性に依存します。
テキストの代わりに画像を利用する傾向が特にあるのは、食事に関するものです。実際、多くのレストランのサイトは、ユーザーにメニューを見せるために画像を使用していますが、目の不自由な人は、適切なalt属性の実装無しではメニューに何が載っているかわからないのです。
5. 「図○○を参照」をちゃんと説明する
「図4.2を参照」という表現はウェブ上に数多くあり、そして図4.2がグラフの場合も何度もあります。これはWeb全体を通して、学術または技術指向のいくつものサイトに共通した特徴です。
「図4.2」のグラフの例
コンテンツ制作者によっては、単純に「図4.2」が何なのか見えない人がいるということを認識していないかもしれません。テキストを読むのではなく聞いている場合であっても、スクリーンリーダーは画像やグラフが示していることを拾うことができない可能性があります。
6. altのテキストは詳細にする
情報を伝えようとしているすべての画像には、適切で具体的なaltテキストを付ける必要があります。こうすることで、スクリーンリーダーはユーザーにメッセージを伝えることができるようになります。altテキストには、サイトに画像を配置する際に伝えようとしているメッセージと全く同じものが含まれている必要があります。また、画像がテキストを含んでいる場合、そのテキストがalt属性の中に含まれている必要もあります。
これに対する唯一の例外は、画像の使用目的が装飾のみのときです。この場合altテキストについてあまり心配する必要はありません。
まとめ
デザイナーは、視覚的な要素のみを重要視する傾向があります。ロゴはどのように見えるべきか、どのレイアウトが最も有効か、CTA（行動喚起）はどの色にするべきか、コンテンツの表示方法はどのようにするべきか、などです。やるべきことはいくらでもあります。
ですがひとつ大きく見落とされているのは、Webデザインが視覚障害のある人々にも確実にアクセスできるようにするということです。「余計な」作業であると考える人もいるかもしれませんが、これは倫理的な要素であるだけではなく、長い目で見れば成果をもたらすことにもなり得ます。
アクセシビリティの考慮されたサイトを作ることは、選択肢の一つではなく、もはや必須なことであるといっても過言ではありません。また視覚障害でなくても、スマホやタブレットなどの小さい画面や画面の見づらい状況によってアクセスが不自由となり得る場合もあります。そのような状況下でサイトを利用するユーザーを手助けすることもできるのです。
