より良いWebサイトの制作を目的として、「ユーザビリティ」と「アクセシビリティ」という言葉はよくその重要性を語られます。
「ユーザビリティの重要性はよく分かるけど、アクセシビリティは余裕があれば、で問題無いかな・・・」
日々のWebサイト運用で余裕のない時間も限られた状況では、このように放置してしまうものです。 しかし、具体的にこの2つの言葉には具体的にどのような違いがあるのでしょうか?本当に放置して良いのでしょうか?
日本語訳では「使いやすさ」と「可触性」
2つの言葉の日本語訳は、
ユーザビリティ(Userbility):「使いやすさ」「使い勝手」
アクセシビリティ(Accessibility):「可触性」「アクセス可能性」
と翻訳されています。
つまり 、ユーザビリティとは「ユーザーの操作をいかに容易にし、Webサイトを利用する目的の達成が簡単か」を意味します。
具体的には以下のような項目です。
- ナビゲーションの使いやすさ
- メニューやラベル名の見やすさ
- 問い合わせの見つけやすさ
- 入力フォームの入力しやすさ
一方のアクセシビリティとは「すべてのユーザーが情報に到達が可能か(目的を達成することが可能か)」を意味します。
具体的には以下のような項目です。
- サイト内のコンテンツにリンク切れを起こしていないか
- 文字サイズが小さすぎないか
- 識別のできる色のコントラストになっているか
- キーボードからwebサイトが操作閲覧可能か フォームの入力が可能か
- 『全てのユーザー』には障がいがある方も含めて考えられているか
すなわちアクセシビリティが、「ユーザーの目的達成」に対して実現可能性であり、「ユーザーの目的達成」の難易度の指標がユーザビリティとなります。
アクセシビリティ:乏しければそもそも全てのユーザーがアクセス不可能
ユーザビリティ:より目的を達成してもらいやすいWebサイトを実現する
図解の通り、アクセシビリティはユーザビリティの実現には欠かせない土台と言えます。
例えば、実店舗でのお買い物に置き換えて考えてみましょう
ユーザビリティとアクセシビリティの違いは「実店舗にお買い物にいく」と置き換えるとイメージがつきやすいです。
あなたには前々から気になっていたアパレルのお店があり、初めてお店に行ってみることにします。
アクセシビリティの問題:「お店へ辿り着けない・・・」
杖が手放せないおばあちゃんと一緒に洋服を買いに行こうとしています。
Webサイトで調べたところ、載っている情報は乏しく、かろうじて住所だけが分かる状態。取り敢えず住所の近くまで行って見ますが、それらしきお店は見当たりません。
小さな英語の看板があり、その案内先の小道を進みたいところですが、どうやら斜面の急な階段を登るようです。
果たして目的達成が可能でしょうか?
ユーザビリティの問題:「探している商品が見つからない・・・」
一方ユーザビリティは、そのお店の中で欲しかったネックレスを見つけるのが困難。
・フロアガイドは英語だけで、なんとなく従って進むも、婦人服と紳士服にフロアが分かれていない(分かりづらいナビゲーション)
・安い!と思ってタグでサイズを確認すると、良く分からないヨーロッパサイズで表記されている(ラベル名が分かりづらい)
果たして目的達成は簡単だったでしょうか?
そして、こんな購入体験をしたあなたは、次このアパレルのお店に再来店するでしょうか?自分は慣れたのでなんとかなりますが、他の人に勧めるでしょうか?
アクセシビリティ、ユーザビリティの実現は再来訪や良質なシェアに繋がる
道を歩くのに看板というナビゲーションがないと迷うのと同様に、Webサイト上でも正しいナビゲーションがないと、ユーザーは当然情報には辿り着けません。しかもWebサイトはテキストと画像がナビゲーション情報として殆どです。
障がい者、高齢者、使用言語、コンテキスト、利用環境やデバイスの違いを超えて、あらゆるすべてユーザーが一律に情報を取得できる環境を用意することでアクセシビリティは実現されます。
また、その上で例えば「一貫性のあるナビゲーションやわかりやすい見出し、入力項目が最低限のフォーム画面、リンク先コンテンツが予測できるボタン」などユーザーが目的を達成しやすくすることがユーザビリティの高いWebサイトとなり、結果的に質の高いユーザー体験、再来訪に繋がるのです。
Webアクセシビリティの基本に関してはこちらの記事でご紹介しているのでぜひご一読ください。
Webアクセシビリティとは?基本を理解するための5つの質問【前編】
https://dmj.underworks.co.jp/2017/08/29/web-accessibility-5questions-part1/
Webアクセシビリティとは?基本を理解するための5つの質問【後編】
https://dmj.underworks.co.jp/2017/09/05/web-accessibility-5questions-part2/