デザイニングWebアクセシビリティ

現在地がわからないサイトを改善する2つのアプローチ

ナビゲーションとパンくずリストの組み合わせで現在地を表現しましょう
このコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。

ユーザーがサイト内で方向転換しようとするときは、現在地の情報を参考にします。わかりやすさと冗長さのバランスをとりながら、ナビゲーションとパンくずリストの組み合わせで現在地を表現しましょう。

この記事では全9章の書籍から、第4章「ナビゲーション設計」の現在地がわからないサイトの改善ポイント、4-4「現在地がわからない」の内容をお届けします。

迷ったとき、現在地がわからないと混乱する

ユーザーが迷ってしまったときは、自分が間違えてどこかに迷い込んだと考え、現在地を知ろうとします。現在地がわからないと手がかりがなくなり、目的の場所に行けなくなることがあります。

現在地を把握する手段がない

現在地を知りたいとき、ユーザーはよくある現在地表示を探します。そのひとつは、ナビゲーションの現在地表示です。ナビゲーション内で選択済みに見える表現があると、ユーザーはそこが現在地であると考えます。もうひとつは、サイトのホームから現在地までの階層を示す「パンくずリスト」と呼ばれるナビゲーションです。これらがないと、ユーザーは現在地を見失ってしまいます。

図
ナビゲーションの現在地表示やパンくずリストがない例。自分がどこにいるのかわからず、どこに行けるのかも推測できない。

現在地の表示と間違えそうな表現がある

一般的な現在地表示のパターンを別の意味で使うと、ユーザーは誤解してしまいます。ナビゲーション項目を不用意に強調したり、スタイルを変えたりすると、現在地表示のように見えます。また、テキストリンクを並べたものがタイトルなしで置かれていると、パンくずリストのように見えます(図1)。

図
ナビゲーション内の特定の項目を強調している例。強調箇所が現在地表示のように見えてしまう。
図
図1:パンくずリストと間違えそうなリンクの例 パンくずリストのように見えるナビゲーションの例。実際はコンテンツが所属するタグの一覧であり、階層構造は示していない。

一般的なわかりやすい現在地表示をつける

ユーザーが迷ったとき、現在地の情報をすぐに見つけられるようにする必要があります。サイト全体のナビゲーションに現在地表示をつけ、バランスを見ながらパンくずリストを設置しましょう。

ナビゲーションに現在地表示をつける

ユーザーが現在地を理解できるように、ナビゲーションには現在地表示をつけます。現在地表示は、はっきりと違いがわかるものにした上で、スタイルも独自のものとし、別の目的に使わないようにします。また、色のみに依存しないよう注意しましょう。「8-1 見た目に頼っている」も参照してください。

また、ナビゲーション内の現在地の項目からは、リンクを外すべきです。自分自身にリンクするリンクがあると、押してもページが変化せず、混乱を招きます。

図
ナビゲーションに現在地表示をつけた例。ナビゲーションが複数ある場合、それぞれの現在地を見ることで現在の詳細な位置が分かる。
※出典:じぶん銀行 http://www.jibunbank.co.jp/products/foreign_deposit/

パンくずリストを設置する

3階層以上あるサイトの場合、パンくずリストの設置を検討しましょう。パンくずリストは、ページ上部に設置することが一般的です。ただし、ページ上部のナビゲーションで現在地が十分に示せている場合、補助的な扱いとして、ページの下部に置くこともあります。

パンくずリストだと明確に認識できるように、独自のデザインは避け、一般的なパンくずリストのデザインにそろえます。パンくずリストの先頭は「ホーム」から始め、区切り文字には「>」を使いましょう。区切りに画像を使用する場合は、「右向き」を指す表現にします。

図
パンくずリストを設置した例。直接的に現在地を確認でき、必要があれば上層のページに移動して確認することもできる。
※出典:東京医科歯科大学 グローバル教育 http://www.tmdu-global.jp/vision/nurture/

コラム複雑すぎるパンくずリスト

コンテンツが同時に複数のカテゴリに属する場合、親階層となるページが複数存在することになります。このとき、親ページの数と同数のパンくずリストを並列で配置してしまうと、膨大な数のリンクの中からリンクを探し出さなければならなくなり、読み飛ばすことも難しくなります(図1)。複数のパンくずリストが考えられる場合でも、主要なものひとつだけに絞って提示しましょう。

図
図1:ナビゲーション領域に多数のパンくずリストを設置した例
ナビゲーション領域に多数のパンくずリストが置かれている例。パンくずリストが非常に広い領域を占め、読み飛ばすことが難しくなっている。

親のカテゴリを漏れなく示すことが必要な場合は、パンくずリストとは別に、親カテゴリへのリンクを設置し、コンテンツ内に設置すると良いでしょう。見た目がパンくずリストと近くても、文脈が異なるため、ユーザーの利用シーンは異なるものになります。コンテンツを読んだ後で出現するため、大量のリンクが提示されてもユーザーが混乱することは少ないでしょう(図2)。親カテゴリに戻る手段については、次節「4-5 再調整したり、やり直す手がかりがない」も参照してください。

図
図2:パンくずリストの要素をコンテンツ内に配置した例パンくずリストの要素をコンテンツ内に配置した例。前後には見出しも立っているため、読み飛ばすことも難しくない。
※出典:Amazon.co.jp http://www.amazon.co.jp/dp/4862462669/

『デザイニングWebアクセシビリティ
アクセシブルな設計やコンテンツ制作のアプローチ』

  • 著者:太田良典、伊原力也
  • 定価:本体3,000円+税
  • 発行:ボーンデジタル
  • ISBN:978-4-86246-265-7

本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。

本書に書かれた内容を実践し、問題として挙げている点をクリアすれば、WCAG 2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。巻末には、WCAG 2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。

なお、本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。

この記事が役に立ったらシェア!
tweet29はてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

3Bの法則
広告表現の中で、美人(Beauty)、赤ちゃん(Baby)、動物(Beast)を ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper株式会社ブレインパッド
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore