アクセシブルなナビゲーション設計ガイド｜ランドマーク、見出し、パンくず、検索の実装と確認

Webアクセシビリティは、利用する端末や操作方法にかかわらず、Webの情報と機能へ到達しやすくする考え方です。

情報設計（IA）は、情報を分類し、名前を付け、利用者が目的の内容へ移動できるように組み立てる設計です。

ナビゲーションを改善するときは、メニューだけを見るのではなく、ページの構造、現在地、代替経路、キーボード操作を一つの仕組みとして確認します。

• ランドマークと見出しで、ページの構造を伝える
• スキップリンクで、繰り返される領域を飛ばせるようにする
• パンくずと現在地表示で、いまいる場所を伝える
• 検索、サイトマップ、関連リンクで、別の到達経路を用意する
• キーボード、画面拡大、タッチ操作でも移動できるか確認する

ナビゲーションを四つの役割で整理する

ナビゲーションの部品は、利用者の問いに対応させると設計しやすくなります。

この四つを分けて考えると、リンクを増やすだけでは解決しない問題が見えてきます。

たとえば、検索を追加しても見出しが曖昧なら、検索結果を開いた後に目的の情報を見つけにくいままです。

ランドマーク、見出し、スキップリンクで骨格を作る

ランドマークはページ内の領域を示す

ランドマークは、ヘッダー、ナビゲーション、本文、補足、フッターなど、ページの主要な領域をプログラムから判別できるようにする構造です。

header、nav、main、aside、footerといったHTML要素を、実際の役割に合わせて使います。

同じ種類のnavが複数ある場合は、aria-labelなどで「グローバル」「パンくず」「ページ内目次」のように区別します。

見出しは内容の階層を示す

見出しは文字の大きさではなく、内容の親子関係で選びます。

この投稿ではWordPressが記事タイトルをh1として出力する前提なので、本文はh2から始め、必要な小見出しにh3を使います。

見出しだけを順に読んだとき、記事の構成と各節の目的がわかるかを確認してください。

スキップリンクは繰り返し操作を減らす

スキップリンクは、共通ヘッダーや長いメニューを飛ばし、本文などへ直接移動するリンクです。

WCAG 2.2のブロックスキップに関する解説では、繰り返される内容を迂回できる仕組みが求められています。

リンクはページの先頭付近に置き、最初のキーボード操作で画面へ現れ、mainなどの対象へ移動できるようにします。

実装後は、表示位置だけでなく読み始める位置も適切に移るかを、実際のブラウザと支援技術で確認します。

グローバルナビゲーションとメガメニュー

まずネイティブHTMLでリンクの集合を作る

一般的なサイトナビゲーションは、navの中にul、li、aを配置すると、リンクのまとまりと階層を伝えやすくなります。

現在のページへのリンクにはaria-currentの値pageを指定し、下線や太字などの視覚的な手掛かりも併用します。

WAI-ARIAは、HTMLだけでは伝えきれない役割、状態、関係を支援技術へ補う仕様です。

ARIAを付ければ操作が自動で実装されるわけではないため、まずHTML本来の要素を使い、必要な状態だけを補います。

開閉メニューは状態と表示を同期させる

サブメニューの開閉にはリンクではなくbuttonを使い、aria-expandedで開閉状態を示します。

開くときは値をtrueにして対象を表示し、閉じるときはfalseに戻して対象を隠します。

• EnterとSpaceで開閉できる
• 開いたリンクへTabで進める
• Escで閉じる仕様では、開閉ボタンへフォーカスが戻る
• 表示とaria-expandedの値が食い違わない

通常のサイトナビゲーションにroleの値menuを指定すると、デスクトップアプリケーションのメニューに近い複雑なキー操作が期待されます。

その操作体系を実装しないサイトナビゲーションでは、W3Cのディスクロージャ型ナビゲーション例のように、ボタンとリンクの標準動作を保つ方が理解しやすくなります。

メガメニューは情報量より分類を先に整える

メガメニューは、多数のリンクを複数のまとまりに分けて表示する大きなナビゲーション領域です。

列数やリンク数を固定値だけで決めず、利用者の目的に沿ってグループを作り、各グループに具体的な見出しを付けます。

• アイコンだけで分類を伝えず、見出しをテキストで表示する
• よく使うリンクと「すべて見る」を区別し、同じ階層に大量のリンクを並べない
• ホバーだけに依存せず、クリック、タップ、キーボードで開閉できるようにする
• 拡大表示と狭い画面では、内容が切れたり横へはみ出したりしないか確認する

パンくず、検索、ページ内目次で別の経路を作る

パンくずはサイト階層と現在地を示す

パンくずリストは、トップページから現在のページまでの階層を短く示すナビゲーションです。

順序のあるリストにはolを使い、現在のページにはaria-currentの値pageを指定します。

最後の項目をリンクにしない設計でも、現在地であることは機械的に判別できるようにします。

パンくずの名称とページタイトルが食い違うと現在地を理解しにくいため、運用時の命名規則もそろえます。

サイト内検索は入力後の体験まで設計する

サイト内検索は、メニューの分類を知らない利用者にも目的地を探す手段を提供します。

検索入力にはlabelを関連付け、常に確認できる項目名を表示します。

プレースホルダーは入力例やヒントに使い、項目名の代わりにはしません。

検索ボタンには動作がわかる文言を置き、検索結果では件数と検索語を見出し付近に示します。

結果タイトルのリンク文だけで移動先を予測できるようにし、結果が0件なら、表記を変える例、カテゴリ、問い合わせ先など、次に選べる行動を示します。

ページ内目次は長いページの現在地を補う

長い記事では、見出しへ移動する目次を冒頭に置くと、必要な節を選びやすくなります。

固定ヘッダーがある場合は、CSSのscroll-margin-topなどを使い、移動先の見出しが隠れないように余白を確保します。

目次のリンク文と移動先の見出しは、同じ対象を指す表現にそろえます。

モバイル、コントラスト、フォーカス

ターゲットサイズはAAとAAAを分けて考える

WCAG 2.2の達成基準2.5.8では、レベルAAのポインター操作対象は原則として24×24 CSSピクセル以上とされ、間隔などの例外も定められています。

44×44 CSSピクセルは達成基準2.5.5のレベルAAAに当たるため、「44ピクセル未満ならAA不適合」とは限りません。

ただし、誤操作を減らす設計目標として、画面に余裕があれば操作対象を44×44 CSSピクセル以上にする考え方は残せます。

• 隣り合うリンクやボタンの間隔を確保する
• 画面の向きを固定せず、縦と横の両方で内容を確認する
• user-scalableの値noで拡大を妨げない
• 拡大時にメニューやダイアログが画面外へ隠れないか確認する

色だけに状態を任せない

通常サイズの文字は原則4.5対1以上、大きな文字は3対1以上のコントラスト比がレベルAAの基準です。

操作部品の識別に必要な境界や状態など、対象となる非テキスト情報にも3対1以上が求められます。

現在地は色だけで示さず、下線、太字、aria-currentなどを組み合わせます。

フォーカス表示には、周囲と見分けられる色、太さ、外側の余白を持たせます。

色の数値を満たしていても、フォーカス表示が固定ヘッダーや開いたパネルに完全に隠れていれば操作位置を追えません。

キーボード操作とフォーカス表示の実務ポイントも合わせて確認してください。

404や検索結果0件にも戻り道を用意する

ナビゲーションは、通常のページだけでなく、目的の内容が見つからなかった場面にも必要です。

「戻る」や「こちら」だけでは移動先がわからないため、「商品一覧へ戻る」「サポートへ問い合わせる」のように目的をリンク文へ含めます。

実装後の確認手順

自動検査だけでは、情報の分類が理解しやすいか、フォーカスの移動が自然かまでは判断できません。

実際の操作を含む次の順序で確認します。

1. 構造を確認する：ページタイトル、ランドマーク、見出し、リンク文、パンくずの順序を確認する
2. キーボードで操作する：TabとShift＋Tabで移動し、Enter、Space、Escの動作を確認する
3. フォーカスを追う：開閉後、ページ内移動後、画面幅変更後にも現在位置が見えるか確認する
4. 支援技術で確認する：ランドマーク一覧と見出し一覧が内容を表し、現在地と開閉状態が伝わるか確認する
5. 表示条件を変える：文字拡大、ズーム、狭い画面、縦横の向きで情報や操作が失われないか確認する
6. 行き止まりを確認する：404、検索結果0件、メンテナンス中でも次の行動を選べるか確認する

公開後も設計規則を保つ

ナビゲーションはページ追加や名称変更の影響を受けるため、公開時の一度だけではなく、運用の中で点検します。

• コンポーネント仕様に、名前、役割、状態、キー操作を記録する
• パンくず、ページタイトル、メニューで使う名称をそろえる
• レビュー項目に、キーボード操作と画面拡大を含める
• 自動検査で検出できない項目を、手動確認の担当と手順に割り当てる

ナビゲーション改善の優先順位

最初に、本文へ到達できない、フォーカスが見えない、メニューを開閉できないといった操作を妨げる問題を直します。

次に、見出しとリンク文を具体化し、現在地と別経路を整えます。

最後に、ページ追加や更新でも品質を保てるように、命名規則と確認手順を運用へ組み込みます。

ランドマーク、見出し、スキップリンク、メニュー、パンくず、検索は別々の部品ですが、利用者が迷わず目的地へ着くという同じ課題を分担しています。