使いやすさとアクセシビリティーを改善するナビゲーションの設計と実装

サイト内のナビゲーションの仕組みやサイトの構造は、そのサイトの使い勝手に影響します。ここでは、一貫性のあるナビゲーション、ページの場所の明示、複数の動線の提供の重要性について説明します。

ナビゲーションの一貫性

画面表示を拡大して利用しているロービジョンのユーザーは、画面の一部分だけを見て操作を行っている場合があります。このようなユーザーの場合、どのページにおいてもナビゲーションのためのリンクの出現順序やレイアウトが一貫していると、ページの構造などを推測しやすくなり、目的の機能をより早く、容易に見つけることができます。

また、スクリーン・リーダーのユーザーの場合、複数のページで共通に出現するナビゲーションなどを毎回すべて読み上げさせるのは時間もかかり非効率的です。しかし、出現順序やレイアウトが一貫していれば、必ずしも毎回同じ内容を読み上げさせる必要がなくなります。

このとき重要なことは、視覚的に出現順序やレイアウトの一貫性があることに加えて、マークアップについても一貫したものを用いるということです。スクリーン・リーダーは、マークアップが示すセマンティクスを伝えるための情報を付加します。したがって、視覚的に同じものでもマークアップが異なれば、読み上げられ方も異なってしまいます。つまり読み上げられ方の一貫性を欠く結果になってしまいます。

ページの場所の明示

そのページが、サイト構造の中のどこに位置しているのかを明示することは、ユーザーがサイト構造を理解するために重要です。サイト構造を理解することで、ユーザーは目的のページに到達しやすくなります。また、サイト構造を理解することで、様々な操作に当たっての推測を容易にします。

例えば、サイトのトップページからの階層構造を示すパンくずリストを表示することは、ユーザーが現在のページの位置を把握するのに役立ちます。

また、現在のページが、グローバル・ナビゲーションのどの項目に属しているのかを示すことも、ユーザーがサイト構造を理解するために役立ちます。これには、視覚的にグローバル・ナビゲーションの項目を強調表示する方法が考えられます。加えて、aria-current属性を適切に用いることで、スクリーン・リーダーのユーザーにも、現在のページがどの項目に属しているのかを伝えることができます。

複数の動線の提供

ページへの動線が1つしかないページの場合、サイト構造を正確に理解している、あるいは容易に推測できるユーザーでなければ、到達するのが困難なページになってしまいます。この問題を軽減するために、複数の動線を提供することが推奨されています。

具体的には、グローバル・ナビゲーションから到達できるページの場合、サイト内のどこからでも到達できることになりますので、この条件を満たします。また、特定のページ中のリンクから到達できることに加えて、他の何らかの手段で到達できれば、この条件を満たします。具体的には、以下のような例を挙げることができます。

  • ヘルプ・ツールが利用ページからのリンク

  • サイト内検索の結果からのリンク

  • 一覧ページからのリンクに加えて、一覧ページのフィルター機能を使って表示した結果からのリンク

しかし、以下の例に挙げるような、特定の文脈で表示されなければ意味が無いようなページに複数の動線を提供する必要はありません。

  • ウィザードの途中で表示されるページ

  • 操作結果の表示など、特定の操作をしたときのみ表示されるページ

関連ガイドライン項目