WEBサイト構造とユーザービリティの考慮すべき点
WEBサイト構造とナビゲーション
- 目的とするページへの誘導の深度(階層)により、目的ページへ到達するクリックを少なくして、スムーズに移動できることが重要です。(3クリック以内、8秒以内)
- WEBサイト全体で掲載したい情報を分類して、WEBサイトの内容を検索・参照できるような分かり易いWEBサイト構造づくりが必要です。
- WEBサイト構造は、必ずしもトップページからの誘導で目的ページへ到達することには限られず、検索エンジンからの直接リンクの場合のサイトの深度位置を示す内容(通常は、パン屑リストで示す)が必要です。
- 検索エンジンからの直接リンクの場合の考慮として、検索結果のページで表示ボリュームが2ページ以内と最適なコンテンツの掲載が必要で、関連内容の掲載ページへの参照を促すリンクが必要です。
- WEBサイト全体で共通的、一般的内容のページをグローバルナビゲーションとし、個々の事業や商品・サービス分野は、ローカルナビゲーションとして分類する方が利用する側からは分かり易いサイト構造に見えます。
- サイト構造の構成パターンは、写真集をめくるような直線型、トップページとそれ以外のページをリンクしたフラット型、カテゴリー別に分類した階層構造でリンクした階層型等があります。
- 階層型は、多くのサイトで利用されているパターンで複雑な構造が多く、WEBサイトのボリュームやクライアントの特性または操作による振り分けするなどの観点から、見れるページの集束、別カテゴリー参照やリンク、一括承認(ショッピングカート機能)、ブログ等の時系列アクセスなどがあります。
ユーザービリティでの考慮すべき項目
- ユーザービリティは、コンテンツの分かり易さ、新鮮さ、利用者にとっての価値ある内容等とアクセスビリティを含んだ内容で、クライアントの端末環境(OS)とブラウザ(バージョン)を考慮する必要があります。
- アクセスビリティは、JIS規格「JIS X 8341-3高齢者・障害者等配慮設計指針」で2004年6月に制定され、第3部に「ウェブコンテンツ」があり表示文字の大きさ、配色の見やすさ、音声読み上げ、キーボードのみでの操作等の内容があります。
- 「JIS X 8341-3高齢者・障害者等配慮設計指針」のアクセスビリティのポイント
- 機種依存文字は、避ける:絵文字(音声ブラウザ等で正しく読み上げられなく,一般的なウェブブラウザで表示されない)、“丸付き文字”、“ローマ数字”、“単位記号”及び“外字”
- コンテンツには,アクセス可能なオブジェクトなどの技術を使う:Flash、PDF、Active-X、JAVA、Mac OS Xで動作するCarbonプログラム等の基準/ガイドラインに沿う
- 見出し,段落,リストなどの要素を用いて文書の構造を規定
- 構造と表示スタイルの分離:コンテンツの表示スタイルは,文書と分離して,書体,サイズ,色,行間,背景色などをスタイルシートを用いて記述すること。
- レイアウトをテーブル要素(<table>)を使用しないことを推奨:表組みによるレイアウトの場合は、音声ブラウザの読み上げ順番を配慮する。
- ページのタイトルには,利用者がページの内容を識別できる名称を付ける。
- フレームの多用の禁止:音声ブラウザでは,それぞれのフレームを切り替えないと全体が確認できない場合もあるため。
- 階層構造とサイトマップの提示:サイトの構造のどこに位置しているか把握できるように,階層などの構造を示した情報を提供。
- デバイスに依存しない操作:特定の単一のデバイスによる操作に依存せず,少なくともキーボードによってすべての操作が可能。
- 入力欄のわかりやすさ:form要素などで入力欄を使用するときは,何を入力すればよいかを理解しやすく示し,操作しやすいよう配慮。
- 入力に時間制限を設けない:制限時間があるときは事前に知らせる。
- リンクの識別と操作:ハイパリンク及びボタンは,識別しやすく,操作しやすくする。
- ナビゲーションスキップ:共通に使われるナビゲーションなどのためのハイパリンク及びメニューは,読み飛ばせるようにすることが望ましい。(方法:ページの外に配置したテキストで隠しナビゲーションスキップを提供他)
- 画像の代替テキストを利用:利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供。(alt属性値に代替テキストを記述し、代替テキストが不要な場合は,alt属性値を空(alt="")にする。)
- 色のみに依存する情報提示:コンテンツの内容を理解・操作するのに必要な情報は,色だけに依存して提供してはならない。(文字の色、グラフでは凡例だけでなく引込み線を用いる)
- 形・位置のみに依存する情報提示:「○」「△」「×」などの記号文字による情報にはテキストによる補足情報を提供する。
- 背景色と前景色のコントラストと配色:画像などの背景色と前景色とには,十分なコントラストを取り,識別しやすい配色にすること。
- 文字サイズの変更:文字のサイズ及びフォントは,必要に応じ利用者が変更できるようにしなくてはならない。(スタイルシートを使用してサイズを指定する場合には,相対値を使用)
- フォント色:文字色と背景色の間に十分なコントラストをとること、背景色との色差を十分にとること。
- 音の自動再生の禁止:自動的に再生する場合には,再生していることを明示しなければならない。
- 早い周期の点滅禁止:光の明滅によって光感受性発作(光源性てんかん)を誘発することがある。20Hzの時間周波数(1秒間に20回)にピークがあり,特に赤と青とを交互に点滅させると,光感受性発作を誘発しやすい。
- 単語途中のホワイトスペースの禁止:表現のために単語の途中にスペース又は改行を入れてはならない。(音声ブラウザはひとまとまりの単語と理解できずに,文字ごとに読み上げてしまう場合があるため)
等