今すぐできる！アクセシビリティを劇的に改善するための3つのポイント

更新日: 2018年01月31日

*ユーザビリティ(Usability)とアクセシビリティ(Accesibility)*はよく混同されてしまいます。
確かにどちらの言葉も、結果的に使い勝手に優れているホームページにする、ということではありますが、対象としてイメージしている人が異なります。

アクセシビリティとは、障碍しょうがい者(Disabled Persons)も含めて、万人が使いやすいようにするという意味です。
リアルの世界でも、障碍しょうがい者の方も区別なくシームレスに利用できるユニバーサルデザインを採用する施設やプロダクトは増えています。

では、ホームページについてはどうでしょうか。
UX的に優れたホームページだとしても、アクセシビリティの観点から見たら最悪、というケースもあり得ます。

内閣府によれば、身体障碍を患っている方だけで実に*366.3万人(国民29人に1人)*います。
もちろん、年齢や環境によってインターネットを使う状況にあるのかは議論の余地がありますが、そうした中で万人に使えるようなホームページを作成する必要があるのではないでしょうか。

今回は、アクセシビリティを劇的に改善するための3つのポイントをご紹介します。

Webアクセシビリティについての基礎知識

まずは、冒頭でも触れた「アクセシビリティ」、中でも、Webに関してのアクセシビリティである*「Webアクセシビリティ」*について振り返ってみましょう。

インターネットに関する規格やガイドラインなどを定める組織に*W3C(the World Wide Consortium)*という組織があります。
1997年に、W3Cはホワイトハウスの指導のもと、*WAI(Web Accesibility Initiative)*という組織を作りました。

WAIの設立の目的は、障碍を持ったひとでも簡単にコンピュータやWebにアクセスしてやりとりをすることができる世界にすることです。
そこで、W3CはWeb Content Accesibility Guidelines(WCAG 2.0)というWebアクセシビリティのガイドラインを定め、Webのコンテンツに関するアクセシビリティの規定を定め、規定に応じて「A」「AA」「AAA」の三段階の基準を設けました。

アクセシビリティについて対策を取るのであれば、この「AAA」の段階を目指していくのが良いということになります。

思っている以上にあなたがアクセシビリティについて考えなければいけない理由

そうはいってもアクセシビリティというのは、優先順位として高くないのかもしれません。
実際に、売上を考えたときには、「一般的な」ユーザーがUX上どのように感じているのかをリサーチし、改善した方が、目先の利益につながるかもしれません。

しかし、本当にそれでよいのでしょうか。

例えば、Webアクセシビリティを考える上で重要な観点として、色盲(Color Blindness)の方への配慮があります。
色盲者にもよく見えるようにホームページを設計するというところまでなっていないかもしれませんが、滋賀医科大学によれば色覚異常を持つ方は、日本人で言えば男性が約5％、女性が約0.2％という割合になります。
つまり、小学校の１学級を40人としてその半数が男の子とすると、平均して１学級に１人は色覚異常の子がいる計算になります。
日本人全体では約300万人という数になります。

実際に、WHOによれば、Webアクセシビリティの先進国とも言えるアメリカでも、26.8％が何らかの色覚異常を持ち合わせているといいます(この場合は、盲目、弱視や色盲などを含みます)。
実に4人に1人もの人が、こうしたケースに相当するのです。

アクセシビリティを劇的に改善するための3つのポイント

Web上の95％の情報は文字情報だと言われています。
もちろん、残りの5％もデザイナーとしては無視できないものかもしれません。
しかし、まずはテキスト情報をWCAG 2.0のガイドラインの基準に合わせていくことが重要になります。

ここでは、アクセシビリティを劇的に改善するための5つのポイントをご紹介していきます。

1. テキストコントラストを最適化する

テキストコントラストとは、背景と文字色とのコントラスト比のことです。
背景が白で文字が黒という最も色の差が大きい組み合わせだと21：1に、背景と文字が同じ色で、まったく見えないという場合には1：1という数値が出ます。
この計算で出た比が大きいほど、基本的には読みやすいということになります。

UIパーツや意図的に装飾されたテキストやロゴタイプなどは基本的には対象外ですが、基本的には12ptのレギュラーフォントで7：1、14ptの太字と18ptのレギュラーフォントで4.5：1がWCAG 2.0でのAAAの基準となっています(日本のJAS基準でも同様に定められています)。

Color SafeのようなWebアクセシビリティに対応したカラーピッカーを使えば、テキストコントラストを比較することができるので、大変便利です。

Credit: Digital Telepathy

上図のように、色の組み合わせをピックアップし、コントラスト比を確認してみましょう。
もしテキストコントラストがイマイチであれば、若干の色味を変えるだけでもアクセシビリティが向上することがあります。

また、ChromeベースのブラウザVivaldiでは、ページアクションと呼ばれる機能があり、画面を白黒にしたり、色味を変更してアクセシビリティを確認する機能があります。
この機会に利用してみてはいかがでしょうか。

2. セマンティックなHTMLにする

セマンティックとは、*「文法上意味を持つ言語体系にする」*という意味です。
HTMLで言えば、imgタグにalt属性を入れたり、aタグにrel属性やaccesskey属性などを設定することです。

また、「受付はこちら」など、リンク上意味を持たないテキストにリンクを貼らないということも重要です。
聴覚障碍のある方は、ブラウザの読み上げ機能を利用することになりますが、そうした方々にとっても使い勝手のよいホームページにするには、「セマンティックな」ホームページにするのが一番有効な手段です。

3. フォームを最適化する

フォームに関しても、セマンティックかつ使い勝手のよいアクセシビリティの高い設計にすることが求められます。

例えば、フォームのコントローラーにid属性を付し、labelタグをつけることで、labelのfor属性と他のコントローラーのidタグが一致し、利便性の高いフォームになります。
また、ラジオボタンは小さくて非常にクリックしにくいので、アクセシビリティの観点ではあまり利用しないほうがいいとされています。

また、フォームの入力が不十分で警告を出す場合にも、わかりやすい色や文字の大きさを保つことが重要です。
何をどう直したほうがいいのかが分からなければ、結局はページの離脱にもつながります。