ユーザビリティとアクセシビリティの違いと具体的な取り組み方
ユーザービリティとアクセシビリティ。WEB運営に関わる人であれば何度か耳にしたことはあると思いますが、「その違いって何?」と聞かれると、即答できる人は少ないと思います。
ユーザービリティ、アクセシビリティは検索エンジンの評価や、サイト訪問ユーザーの満足度、ひいては成約率等にまで影響します。フワッとした理解は卒業して、ハッキリ違いを理解して取り組みを進められるよう知識を深めていきましょう。
目次
アクセシビリティとは?
アクセシビリティとは高齢の方や身体障害者の方を含む、あらゆるユーザーがどのような環境下においてもホームページを利用でき、必要とする情報にたどり着けるかどうか?という事です。
つまりアクセシビリティ向上の取り組みとは、「使えない」を「使える」に変えていく(万人にとって)に重点がおかれています。
ユーザービリティとは?
ユーザービリティとはシンプルに「使いやすさ」と理解して構いません。ただ、こちらは使えるか使えないかというレベルではなく、既に使える人が「さらに便利に快適に使える」状態を目指す取り組みとなります。
目的を達成するための効果・効率・満足感という定義もあり、要はユーザーがストレス無く快適にサイトを利用できる状態を目指す事がポイントとなります。
例えば、ページ表示速度の問題はどちらに分類される?
ページ表示速度の問題はアクセシビリティ、ユーザービリティのどちらに分類されるでしょうか?冷静に考えればすぐわかりますよね。
ページの表示が遅くてもサイトの利用自体に問題が無ければ、アクセシビリティに問題があるという事にはなりません。より快適に使えるようにするための改善なので、分類するならユーザービリティの改善の方です。
分類する事にあまり意味はありませんが、整理して理解するため、あえて書いておきました。
アクセシビリティ向上の代表的な取組み
官公庁などのサイトが準拠するウェブアクセシビリティの日本工業規格「JIS X 8341-3:2010」における等級A(シングルA)のレベルの内容に全て対応するとなると相当細かくなってしまうので、WEB運営者として是非対応しておきたいポイントに絞って紹介させて頂きます。
代替テキスト
imgタグの中にalt属性を記載し、画像が表示できない環境や、音声読み上げソフト等への対応として、画像の代替となるテキストを表示します。また、動画や画像など視覚的なコンテンツについては概要やキャプションなど、内容が分かるテキストを併記します。
CSSオフでも伝わるコンテンツ構造
CSSが利用できない環境でも的確にコンテンツ内容が伝わるようにhtmlの構造化マークアップを行う。
使用文字について
機種依存文字を利用しない、半角カタカナを使用しない、外字にあたる漢字は画像化するなど、あらゆる環境で表示できるフォントを使用します。
色・イメージについて
点滅文字、点滅画像の使用を避ける。コントラストの不鮮明な色、画像を使用しない。グラフや説明用の画像などaltのみでは伝えられない情報を持つイメージ画像については、内容が理解できる文章を併記する。
文字サイズ
文字サイズは万人が読みやすいサイズを心がける。また、必要に応じてユーザー自身が文字サイズの拡大・縮小を行える機能を提供する。
音声読み上げ
音声読み上げソフトが情報を的確に取得できるようにhtmlを設計する。またグローバル・ナビゲーションを読み飛ばしできる機能を提供する。
操作性
ページ上部にページ主要コンテンツを行き来できるグローバル・ナビゲーションを設置、パンくずリストや、ページ上部に戻るリンクの設置などの操作性の追求。また、iframeの利用を禁止する。ポップアップの禁止など操作性を損なう機能を利用しない。
リンク
アンカーテキスト(リンクテキスト)には「コチラ」や「詳細を見る」ではなく、「制作料金の詳細」、
「お客様事例を見る」など、リンク先の内容が分かる情報を含めるように配慮する。
リンクファイル
PDFなどのファイルを掲載する際は、PDF等のリンクファイルの形式、及びファイルサイズを明示する。また、Word等の環境に依存しやすいファイル形式については、できる限り複数のファイルフォーマットを準備する。
まとめ
ユーザービリティの具体的な取り組みについては、更に細かくなってしまうので、また別の記事でご紹介しますが、アクセシビリティ、ユーザービリティの正しい理解と向上のための取り組みは、ユーザー視点のサイト作り、満足度向上、その結果として検索エンジンの評価にもつながっていきます。
言葉の雰囲気として小難しい感じはしますが、スゴく大事なことなので、是非、拒否反応を起こさずしっかり取り組んでいく事をオススメします。