「ナビゲーション可能」が解決すること
JIS X 8341-3:2016の「ナビゲーション可能」は、利用者が目的の情報を見つけ、現在位置を把握し、別の場所へ移動できるようにするための指針です。
メニューを置くだけでは、誰もが移動しやすいサイトにはなりません。
ページの構造、リンクの文言、キーボードで移動する順序、現在選択している要素の見え方まで、一連の体験として整える必要があります。
この配慮は、画面を読み上げるスクリーンリーダーの利用者、マウスを使わずに操作する人、ページの構造を手掛かりに情報を探す人などを支えます。
達成基準の全体像
「ナビゲーション可能」には、適合レベルA、AA、AAAの達成基準があります。
次の表は、各達成基準が何を確認するものかを実務向けに短く整理したものです。
| 達成基準 | レベル | 確認すること |
|---|---|---|
| 2.4.1 ブロックスキップ | A | 複数ページで繰り返されるメニューなどを飛ばせるか |
| 2.4.2 ページタイトル | A | ページの内容や目的がタイトルから分かるか |
| 2.4.3 フォーカス順序 | A | 順番に移動したとき、意味や操作を損なわない順序になっているか |
| 2.4.4 リンクの目的（コンテキスト内） | A | リンクの文言と周囲の文脈から移動先を判断できるか |
| 2.4.5 複数の手段 | AA | サイト内のページを複数の方法で探せるか |
| 2.4.6 見出し及びラベル | AA | 見出しや操作部品のラベルが内容や目的を説明しているか |
| 2.4.7 フォーカスの可視化 | AA | キーボードで選択中の要素を目で確認できるか |
| 2.4.8 現在位置 | AAA | サイトやページ群の中で現在位置を確認できるか |
| 2.4.9 リンクの目的（リンクだけ） | AAA | 原則としてリンクの文言だけで目的を判断できるか |
| 2.4.10 セクション見出し | AAA | 見出しによって内容が区切られているか |
サイトが目標とする適合レベルによって確認対象は変わるため、すべての項目を同じ必須条件として扱うものではありません。
関連する達成基準との違い
キーボードだけで操作できることと、サイト全体でナビゲーションを一貫させることは、「ナビゲーション可能」と密接に関係します。
ただし、JIS X 8341-3:2016では、キーボード操作は2.1、一貫したナビゲーションは3.2.3に分けて整理されています。
監査では関連項目として一緒に確認しつつ、どの達成基準に対する結果なのかを分けて記録すると、修正漏れや適合レベルの取り違えを防げます。
実装時の操作方法は、キーボード操作とフォーカス表示の実務解説も参考になります。
実装で優先して確認したいポイント
繰り返し部分を飛ばせるようにする
各ページの先頭に長いメニューがあると、キーボードやスクリーンリーダーの利用者は、本文へ進むたびに同じ項目を通過しなければなりません。
スキップリンクは、その繰り返し部分を飛ばして主要コンテンツへ移動するためのリンクです。
リンク先の主要領域へ実際にフォーカスが移るか、表示中の固定ヘッダーなどに移動先が隠れないかまで確認します。
考え方と実装例は、ブロックスキップ機能の解説で確認できます。
ページタイトルと見出しで構造を伝える
ページタイトルは、ブラウザーのタブや検索結果などで、そのページを識別する手掛かりになります。
「トップ」「詳細」のような抽象的なタイトルではなく、ページ固有の内容や目的が分かる文言にします。
本文では、見出しだけを順に読んでも話の構造が分かるようにし、見た目を大きくする目的だけで見出し要素を使わないようにします。
フォーカスの順序と見え方をそろえる
フォーカスとは、キーボード操作の対象として現在選ばれているリンク、ボタン、入力欄などの状態です。
Tabキーで移動したとき、画面上の流れとかけ離れた順序になったり、途中で操作できない場所へ飛んだりすると、利用者は次の操作を判断しにくくなります。
順序だけでなく、枠線や背景色などによって現在位置を視覚的に確認できることも必要です。
リンクの目的を具体的に書く
「こちら」「詳しく見る」だけでは、リンクを一覧で確認する利用者が移動先を判断できない場合があります。
「料金プランを確認する」「お問い合わせ方法を見る」のように、リンク先で何ができるかを文言に含めます。
同じ文言のリンクが異なるページへ移動する場合は、それぞれの目的が区別できるようにします。
目的のページへ複数の経路を用意する
サイト内検索、メニュー、サイトマップ、関連ページへのリンクなど、目的のページを探す方法を一つに限定しない設計が役立ちます。
現在位置を示すパンくずリストや選択中メニューの表示があれば、利用者はサイト内での位置関係を把握しやすくなります。
見出しと操作部品のラベルを具体的にする
見出しは直後の内容を、ボタンや入力欄のラベルはその役割を説明する文言にします。
虫眼鏡のアイコンだけを置く場合でも、支援技術に「検索」と伝わる名前が必要です。
見た目から推測できることと、支援技術が読み取れる名前が一致しているかを確認します。
公開前の確認手順
- ページの先頭からTabキーで移動し、フォーカスが常に見えるか確認します。
- スキップリンクを操作し、主要コンテンツへ移動できるか確認します。
- フォーカスの順序が画面の意味や操作の流れと一致しているか確認します。
- ページタイトルと各見出しが、内容や目的を具体的に表しているか確認します。
- リンクだけを拾い読みし、移動先を判断できない文言がないか確認します。
- メニュー以外にも、検索やサイトマップなど目的のページを探す手段があるか確認します。
- スクリーンリーダーでも見出し、リンク、ラベルの順に確認し、視覚だけに依存した案内がないか調べます。
自動チェックは確認の入口にはなりますが、フォーカス順序の自然さやリンク文言の分かりやすさは、実際に操作して判断する必要があります。
迷わず移動できる設計を保つ
「ナビゲーション可能」への対応は、スキップリンクやフォーカス表示を一度追加すれば終わる作業ではありません。
ページやメニューを追加したときにも、タイトル、見出し、リンク、移動順序、現在位置の手掛かりが保たれているかを確認します。
達成基準ごとに結果を記録し、実際のキーボード操作と支援技術による確認を組み合わせることで、利用者が目的の情報へたどり着ける状態を維持しやすくなります。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
導入や機能の詳細は、サービスページでご確認ください。