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

情報への到達手段が少なすぎるサイトを改善する2つのアプローチ

複数のルートでコンテンツに到達できるようにしましょう

 


このコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。

 

あるユーザーには役に立つナビゲーションも、他のユーザーには使えなかったり、ニーズを満たせないことがあります。複数のルートでコンテンツに到達できるようにして、到達手段を確保する必要があります。

この記事では全9章の書籍から、第4章「ナビゲーション設計」の情報への到達手段が少なすぎるサイトの改善ポイント、4-6「情報への到達手段が少なすぎる」の内容をお届けします。

選択肢がないと情報を探しにくい

ユーザーのニーズやリテラシーはさまざまです。サイトが用意しているメインのナビゲーションを使いづらいと感じる場合もあります。サイトマップやサイト内検索などがないと、目的とする情報に到達できなくなることがあります。

サイトマップやサイト内検索が見当たらない

サイトのメインとなるナビゲーションは、典型的なユーザーのニーズに合わせて設計します。しかし、ナビゲーションの項目やラベルはサイトごとに異なるため、ユーザーは新しいサイトを訪問するたびに、使い方を学習しなければなりません。他のサイトでナビゲーションが使いづらかった経験から、そもそもメインのナビゲーションを使おうとしないユーザーもいます。情報への到達手段がメインのナビゲーションだけしかない場合、このユーザーは情報に到達できなくなってしまいます。

図
サイトマップやサイト内検索が見当たらない例。ナビゲーションを使いこなせないユーザーの最後の砦がなくなってしまう。

このようなユーザーへの助け舟となるのが、サイトマップとサイト内検索です。これらの仕組みは、サイトごとの表現の差異が小さいため、ユーザーが安心して利用できます。これらが利用できないと、ユーザーはサイト側の作法に合わせなければならず、負担が大きくなります。

サイトマップやサイト内検索が役に立たない

サイトマップとサイト内検索が存在しても、その内容が適切でない場合、余計に混乱を深める結果になってしまいます。

  • 役に立たないサイトマップ

    サイトマップの掲載内容が多すぎると、大量のリンクの中から目的の物を探し出さなければなりません。大規模なサイトでは、サイトマップに全てのページを載せるとリンクが膨大な量になってしまい、非常に使いにくくなります。逆に、下層のコンテンツへのリンクを省略しすぎて、最上位付近の階層しか掲載していない場合、ナビゲーションと情報量が変わらなくなり、サイトマップの意味がなくなります。

    図
    サイトマップにナビゲーションと同じ内容しか載っていない例。サイトマップやサイト内検索が存在していても、役に立つ内容になっていなければ意味がない。

    また、ナビゲーションでの分類軸や並び順とサイトマップの並び順が異なっていたり、最新の内容がサイトマップに反映されておらず、誤った内容になってしまっているケースも見受けられます。このようなことがあると、サイトマップを使おうとしたユーザーがかえって混乱することになります。

  • 役に立たないサイト内検索

    サイト内検索では、入力キーワードに対して期待した答えが返ってこない場合があります。ユーザーは、キーワードをタイプミスすることがありますし、同義語や異なる表記の単語で検索することもあります。ユーザーのニーズを満たすコンテンツがあっても、ユーザーが検索した単語がコンテンツに含まれていなければ、検索結果に出てきません。検索結果に出てきても、上位に表示されなかったり、ページタイトルや説明文が不適切な場合、ユーザーに気づいてもらえないことがあります。

コンテンツを探す手段を複数用意する

複数のナビゲーションの手段を用意することで、ユーザーはさまざまな方法や切り口でコンテンツを探せるようになります。サイトマップやサイト内検索を設けて到達手段に冗長性を持たせると、必要な情報に到達できる可能性が高まります。

サイトマップを設ける

サイトマップの目的は、サイトの階層構造をわかりやすく伝えることです。特異なデザインや複雑なインタラクションは避け、見出しやリストを使って、コンテンツへのリンクをツリー状に配置します。サイトマップに掲載する階層の数は、おおむね3~4階層分を目安にすると良いでしょう。

サイトマップへのリンクもわかりやすい場所に設置しましょう。ユーザーが困ったときに目が行く、ヘッダ内に設置することが一般的ですが、コンテンツを読み終えたユーザーが次の行き先を検討できるように、フッタに展開して設置することもあります。いずれの場合も、定位置に置いておくことが重要です。

図
ヘッダ内にサイトマップのリンクを設置した例。迷ったユーザーはいつでもサイトマップにアクセスできる。
※出典:富士フイルム http://www.fujifilm.jp

サイトマップのメンテナンス漏れにも注意が必要です。コンテンツの追加・削除を行った場合、忘れずにサイトマップに反映する必要があります。運用マニュアルに加える、CMSを利用して自動更新されるようにするなどの方法で、サイトマップの更新漏れを防止しましょう。

サイト内検索を設ける

可能であれば、サイト内検索を設けます。ただし、単に設置しただけでは使われなかったり、適切な結果を返せないことがあります。ユーザーにとって役に立つ機能を提供しましょう。

サイト内検索は、検索ボックスが見える形でヘッダの右上に置くのがベストです。多くのサイトでこの位置に置かれているため、検索したいユーザーはまずこの位置を探します。また、サイト内検索のボックスには、キーワードを入力するための十分な大きさが必要です。スペースが確保できない場合、普段は小さなボックスを表示しておき、フォーカス時にボックスを広げるという方法もあります。

図
ヘッダ内にサイト内検索を設け、サジェスト機能を提供した例。入力の負担が減り、入力ミスも防止できる。
※出典:富士フイルム http://www.fujifilm.jp

サイト内検索が実際に活用できるように、ユーザーの行動を確認しましょう。実際にどんな単語が検索されているか調査し、対応するコンテンツがあるか確認します。適切なコンテンツがある場合、コンテンツ内にキーワードを含めて、検索にヒットするようにしましょう。類義語や表記ゆれを検索エンジンの側で吸収できない場合、「Web(ウェブ)」のようにかっこ書きで併記して両方書く方法もあります。

ユーザーのタイプミスや表記ゆれは、サジェスト機能で補うこともできます。入力ミスを防ぐだけでなく、入力の負担を減らすメリットもあります。ただし、サジェスト機能はスクリプトで動作するため、実装方法によっては問題が生じることもあります。キーボードで操作できるか、スクリーンリーダーで利用できるかといった点を確認しておきましょう。

頻繁に検索される単語に対し、対応するコンテンツが存在しない場合、ニーズがあるのにコンテンツがない状況になっています。この場合は、ニーズを満たすコンテンツを追加できないか検討しましょう。

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

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

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

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

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

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

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

今日の用語

アップロード
手元のPCなどの機器から、ネットワークを介して、別のPCやファイルサーバー、ウェ ...→用語集へ

インフォメーション

RSSフィード


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