Webアクセシビリティは、利用する端末や操作方法にかかわらず、Webの情報と機能へ到達しやすくする考え方です。
情報設計（IA）は、情報を分類し、名前を付け、利用者が目的の内容へ移動できるように組み立てる設計です。
ナビゲーションを改善するときは、メニューだけを見るのではなく、ページの構造、現在地、代替経路、キーボード操作を一つの仕組みとして確認します。
- ランドマークと見出しで、ページの構造を伝える
- スキップリンクで、繰り返される領域を飛ばせるようにする
- パンくずと現在地表示で、いまいる場所を伝える
- 検索、サイトマップ、関連リンクで、別の到達経路を用意する
- キーボード、画面拡大、タッチ操作でも移動できるか確認する
ナビゲーションを四つの役割で整理する
ナビゲーションの部品は、利用者の問いに対応させると設計しやすくなります。
| 利用者の問い | 対応する要素 | 設計時の確認 |
|---|---|---|
| このページは何か | ページタイトル、見出し | 内容や目的を具体的に表しているか |
| いまどこにいるか | 現在地表示、パンくず | 色だけに頼らず現在地を伝えているか |
| 次にどこへ行けるか | グローバルナビゲーション、関連リンク | リンク先を文言から予測できるか |
| 別の探し方はあるか | サイト内検索、サイトマップ、ページ内目次 | 一つの経路が使えなくても目的地を探せるか |
この四つを分けて考えると、リンクを増やすだけでは解決しない問題が見えてきます。
たとえば、検索を追加しても見出しが曖昧なら、検索結果を開いた後に目的の情報を見つけにくいままです。
ランドマーク、見出し、スキップリンクで骨格を作る
ランドマークはページ内の領域を示す
ランドマークは、ヘッダー、ナビゲーション、本文、補足、フッターなど、ページの主要な領域をプログラムから判別できるようにする構造です。
header、nav、main、aside、footerといったHTML要素を、実際の役割に合わせて使います。
| 要素 | 主な役割 | 実装上の注意 |
|---|---|---|
header |
ページやサイトの導入領域 | 本文より前に共通情報をまとめる |
nav |
主要なリンクのまとまり | 複数ある場合は用途を名前で区別する |
main |
ページ固有の中心内容 | スキップリンクの移動先を用意する |
aside |
本文を補う関連情報 | 役割が分かれる場合は名前を付ける |
footer |
連絡先や補助的なサイト情報 | 主要な戻り道を残す |
同じ種類の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件にも戻り道を用意する
ナビゲーションは、通常のページだけでなく、目的の内容が見つからなかった場面にも必要です。
| 場面 | 最初に伝えること | 次の行動 |
|---|---|---|
| 404 | ページが見つからないこと | トップ、検索、主要カテゴリへのリンク |
| メンテナンス中 | 利用できない範囲と見込み | 代替手段、連絡先、再確認方法 |
| 検索結果0件 | 該当する結果がないこと | 検索語の変更例、カテゴリ、問い合わせ先 |
「戻る」や「こちら」だけでは移動先がわからないため、「商品一覧へ戻る」「サポートへ問い合わせる」のように目的をリンク文へ含めます。
実装後の確認手順
自動検査だけでは、情報の分類が理解しやすいか、フォーカスの移動が自然かまでは判断できません。
実際の操作を含む次の順序で確認します。
- 構造を確認する：ページタイトル、ランドマーク、見出し、リンク文、パンくずの順序を確認する
- キーボードで操作する：
TabとShift＋Tabで移動し、Enter、Space、Escの動作を確認する - フォーカスを追う：開閉後、ページ内移動後、画面幅変更後にも現在位置が見えるか確認する
- 支援技術で確認する：ランドマーク一覧と見出し一覧が内容を表し、現在地と開閉状態が伝わるか確認する
- 表示条件を変える：文字拡大、ズーム、狭い画面、縦横の向きで情報や操作が失われないか確認する
- 行き止まりを確認する：404、検索結果0件、メンテナンス中でも次の行動を選べるか確認する
公開後も設計規則を保つ
ナビゲーションはページ追加や名称変更の影響を受けるため、公開時の一度だけではなく、運用の中で点検します。
- コンポーネント仕様に、名前、役割、状態、キー操作を記録する
- パンくず、ページタイトル、メニューで使う名称をそろえる
- レビュー項目に、キーボード操作と画面拡大を含める
- 自動検査で検出できない項目を、手動確認の担当と手順に割り当てる
ナビゲーション改善の優先順位
最初に、本文へ到達できない、フォーカスが見えない、メニューを開閉できないといった操作を妨げる問題を直します。
次に、見出しとリンク文を具体化し、現在地と別経路を整えます。
最後に、ページ追加や更新でも品質を保てるように、命名規則と確認手順を運用へ組み込みます。
ランドマーク、見出し、スキップリンク、メニュー、パンくず、検索は別々の部品ですが、利用者が迷わず目的地へ着くという同じ課題を分担しています。
この記事に関連する株式会社greedenの取り組み
ナビゲーションの改善は、見つけやすさと操作しやすさを同時に整える継続的な仕事です。株式会社greedenはWebアクセシビリティのチェックとUUUの提供を通じ、サイト運用の改善を支援しています。