navigation

ナビゲーションのアクセシビリティスキル

正規のソース：mgifford/ACCESSIBILITY.md の examples/NAVIGATION_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルをもとに作成されています。判断に迷った場合は、例を優先してください。

プライマリーナビゲーション、ドロップダウン、パンくずリスト、ページネーション、モバイルメニュー、ページ内ナビゲーションなどのナビゲーションパターンを作成またはレビューするときは、次のルールを適用してください。 プロジェクトにナビゲーションコンポーネントが含まれる場合のみ、このスキルを読み込んでください。

---

基本方針

ナビゲーションは、キーボード、タッチ、音声入力、スクリーンリーダー、画面拡大、テキストサイズの変更、ブラウザーのズームでも、理解しやすく操作できる状態を保つ必要があります。スクリーンリーダーのユーザーは、現在位置を把握するためにランドマーク構造を利用します。キーボードユーザーは、予測可能なタブ順序とドロップダウンの動作を頼りにします。音声コントロールのユーザーは、視認でき、適切にラベル付けされたインタラクティブ要素を頼りにします。画面拡大を使用するユーザーにとっては、レイアウトを崩さずに再配置されるナビゲーションが必要です。ナビゲーションが適切でないと、その後の操作すべてが難しくなります。

---

重大度の尺度（このスキル）

レベル	意味
Critical	ナビゲーションにまったくアクセスできない、またはキーボードトラップが発生する
Serious	ドロップダウンがホバーでしか動作しない、role="menu" の誤用、aria-current がない
Moderate	セカンダリーナビゲーションに aria-label がない、パンくずリストにラベルがない
Minor	ナビゲーション項目が7つを超える、aria-expanded の更新に一貫性がない

パターンだけを根拠に重大度を決めないでください。ナビゲーションやタスクの完了に対する実際の影響を判断してください。ユーザーがメインコンテンツに到達できるか、メニューを開く・操作する・閉じる・抜けることができるか、フォーカスが閉じ込められたり失われたりしないか、また共有コンポーネントを通じてすべてのページに不具合が及ぶか（共有ナビゲーションのトラップはサイト全体の利用を妨げる可能性があります）を考慮してください。

---

支援技術のコンテキスト

ナビゲーションの動作は支援技術によって異なります。次の環境でテストしてください。

支援技術	ブラウザー	主なキー操作
NVDA	Chrome	見出しには H キー、ランドマークには R キー。ナビゲーションに入るとリストの項目数を読み上げます
JAWS	Chrome	フレーム／ランドマーク間の移動には F6、メインコンテンツへの移動には Q。ナビゲーションのランドマークを読み上げます
VoiceOver	Safari（macOS）	ランドマークとリンクには VO+U ローターを使用。ナビゲーションのラベルを読み上げます
VoiceOver	Safari（iOS）	スワイプして移動。ローターからナビゲーションのランドマークにアクセスできます
TalkBack	Chrome（Android）	スワイプして順に移動。ローカルコンテキストメニューからランドマークにアクセスできます
音声コントロール	任意	ユーザーは視認できるリンクテキストを使って移動します。すべてのインタラクティブ要素に、正確で視認できるラベルが必要です。aria-label が表示テキストと異なると、音声コントロールで操作できなくなります
画面拡大	任意	固定されたナビゲーションバーは、高倍率ズーム（200%、400%）で表示可能なビューポートを狭めます
リーダーモード	Firefox／Edge／Safari	記事表示からナビゲーションが取り除かれます。これは問題ありませんが、メインコンテンツはナビゲーションなしでも理解できる必要があります

音声コントロールに関する注意： Dragon と iOS の音声コントロールでは、表示されているリンクテキストを読み上げて操作します。aria-label が表示テキストと異なると、ユーザーは見えているテキストを読み上げてもリンクを操作できません。アクセシブルな名前には、表示テキストを含める必要があります（WCAG 2.5.3 名前の中のラベル）。

---

Critical：ランドマーク構造

<a class="skip-link" href="#main-content">Skip to main content</a>

<header>
  <a href="/">Service name</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="/services">Services</a></li>
      <li><a href="/guidance">Guidance</a></li>
    </ul>
  </nav>
</header>

<main id="main-content" tabindex="-1">
  <h1>Page title</h1>
</main>

<footer>
  <nav aria-label="Footer">…</nav>
</footer>

• <nav> は、サイト、ページ、またはプロセス内でユーザーの移動を助ける主要なリンク群を囲みます。付随的なリンクリストをすべてナビゲーションランドマークで囲まないでください。ランドマークが多すぎると、領域間の移動が難しくなります。
• 複数の <nav> 要素がある場合、ユーザーがそれぞれを区別できるよう、すべての要素にわかりやすい名前が必要です。例：aria-label="Primary"、"Footer"、"On this page"。ロール名を含めないでください（ロールはすでに公開されるため、「Primary navigation landmark」のような名前は冗長です）。
• 表示されている見出しがすでに領域の名前になっている場合は、aria-labelledby を使用してください。
• 同じリンクを含むナビゲーションランドマークが繰り返される場合は、同じ名前を使用してください。ランドマークの目的が異なる場合は、異なる名前を使用してください。
• <nav> に冗長な role="navigation" を追加しないでください。

<nav> ランドマークがない場合は Serious です。スクリーンリーダーのユーザーは、ローターやランドマーク一覧からナビゲーションに移動できません。

---

重大：スキップリンク

スキップリンクは本文の冒頭またはその近くに配置し、スキップ対象のコンテンツより前に置く必要があります。また、キーボード操作で最初に到達する有用な位置の一つにしてください（DOM の文字どおり最初のノードである必要はありません）。スキップリンクを恒久的に非表示にする（display:none、visibility:hidden、または hidden）と、重大な問題になります。WCAG 2.4.1 の目的を損なうためです。

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.75rem 1rem;
  color: #ffffff;
  background: #000000;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

リンクを有効にしたとき、ビューポートとキーボードフォーカスの両方が移動先に移ることを確認してください。プログラムによるフォーカスを確実にするため、<main> に tabindex="-1" を使用してください。また、固定ヘッダーが移動先を覆い隠さないようにしてください。適合性の方針によっては、見出しやランドマークなど、ほかの適合するバイパス手段も WCAG で認められています。

---

重大：現在位置（aria-current）

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/guidance" aria-current="page">Guidance</a></li>
  </ul>
</nav>

関係性に合った値を使用してください。常に "true" を使うわけではありません。

• aria-current="page" — 現在のページ
• aria-current="step" — プロセスにおける現在のステップ
• aria-current="location" — 環境内の現在位置（例：スクロール位置に追従する目次）
• aria-current="date" / "time" — 該当する場合
• aria-current="true" — より具体的なトークンが当てはまらない場合のみ

通常のナビゲーションリンクには aria-selected を使用しないでください。タブやリストボックスなど、選択状態がウィジェットの役割の一部であるものに限って使用してください。また、色だけに頼らない視覚的な現在項目の表示も必ず用意してください。現在位置を示す項目に aria-current がない場合は重大な問題です。スクリーンリーダーのユーザーは、自分がどこにいるのかを判断できません。

---

重大：サイトナビゲーションはアプリケーションメニューではありません

通常のサイトナビゲーションに "menu"／"menuitem"／"menubar" の role を使用すると、重大な問題になります。これらのロールを指定すると、スクリーンリーダーはアプリケーションメニューの操作モードになります（矢印キーで移動し、Tab キーでメニュー全体から抜けます）。これは、ユーザーがウェブナビゲーションに期待する操作と一致しません。

<nav><ul role="menu"><li role="menuitem"><a href="/about">About</a></li></ul></nav>


<nav aria-label="Primary">
  <ul><li><a href="/about">About</a></li></ul>
</nav>

この違いは見た目ではなく、動作と目的に基づきます。role="menu"／"menuitem" が適切なのは、矢印キーによる完全な操作を実装するアプリケーションのツールバー／アクション／コンテキストメニューに限られます。この用途については、WAI-ARIA APG menubar pattern を参照してください。

---

重大：ディスクロージャー（ドロップダウン）ナビゲーション

ネストされたリンクのリストを表示／非表示にするサイトナビゲーションにはディスクロージャーボタンを使用し、通常のナビゲーションを無理に ARIA menubar パターンに当てはめないでください。

<nav aria-label="Primary" data-disclosure-nav>
  <ul>
    <li data-disclosure-item>
      <a href="/services">Services</a>
      <button type="button" aria-expanded="false" aria-controls="services-links">
        <span class="visually-hidden">Show Services submenu</span>
        <svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
          <path d="m5 7 5 5 5-5" fill="none" stroke="currentColor" stroke-width="2"/>
        </svg>
      </button>
      <ul id="services-links" hidden>
        <li><a href="/services/design">Design</a></li>
      </ul>
    </li>
  </ul>
</nav>

1 つの要素にリンクとドロップダウンのトリガーを兼ねさせないでください。「Services」がリンクとドロップダウンのトリガーを兼ねると、キーボードユーザーはページ遷移せずにドロップダウンへ移動できません。別個のボタン（上記参照）を使用するか、ボタンのみの親項目に「Overview」リンクを最初の子項目として配置してください。

document.querySelectorAll('[data-disclosure-nav]').forEach((navigation) => {
  const buttons = Array.from(navigation.querySelectorAll('[data-disclosure-item] > button[aria-controls]'));

  function close(button, restoreFocus = false) {
    const panel = document.getElementById(button.getAttribute('aria-controls'));
    button.setAttribute('aria-expanded', 'false');
    panel.hidden = true;
    if (restoreFocus) button.focus();
  }
  function open(button) {
    const panel = document.getElementById(button.getAttribute('aria-controls'));
    button.setAttribute('aria-expanded', 'true');
    panel.hidden = false;
  }

  buttons.forEach((button) => {
    button.addEventListener('click', () => {
      const expanded = button.getAttribute('aria-expanded') === 'true';
      expanded ? close(button) : open(button);
    });
    const item = button.closest('[data-disclosure-item]');
    item.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && button.getAttribute('aria-expanded') === 'true') {
        e.preventDefault();
        close(button, true);
      }
    });
    item.addEventListener('focusout', (e) => {
      if (!item.contains(e.relatedTarget)) close(button);
    });
  });

  document.addEventListener('pointerdown', (event) => {
    buttons.forEach((button) => {
      const item = button.closest('[data-disclosure-item]');
      if (!item.contains(event.target)) close(button);
    });
  });
});

要件：aria-expanded と hidden の状態を同期させること。Tab／Shift+Tab は通常の順序に従うこと。Escape キーで閉じ、フォーカスをボタンに戻すこと。親項目の外へフォーカスが移動したらサブメニューを閉じること。開いてもフォーカスやページを自動的に移動させないこと。ホバーなしでコンポーネントが機能すること。JavaScript の対象をナビゲーションコンポーネントに限定し、ページ上のすべての aria-controls 要素に適用しないこと。

ホバー動作は任意です。クリック／有効化だけで操作できる必要があります。ホバーやフォーカスでもコンテンツを表示する場合、WCAG 1.4.13 に従い、解除可能（フォーカス／ポインターを移動させずに閉じられる）、ホバー可能（ポインターで上に移動できる）、かつ持続的（ホバー／フォーカスが解除されるか、閉じられるまで表示され続ける）でなければなりません。CSS の transition-delay だけでは、ホバー可能性や持続性の要件を満たしません。

---

中程度：パンくずリスト

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/services">Services</a></li>
    <li aria-current="page">Web accessibility</li>
  </ol>
</nav>

順序に意味があるため、<ol> を使用してください。装飾用の区切り文字は支援技術から隠してください（CSS による方法が望ましいです）。現在の項目はプレーンテキストでもリンクでもかまいませんが、役に立つ移動先のないリンクは作成しないでください。表示するパンくずリストは、実際のページ階層と一致させてください。WCAG は、すべてのサイトにパンくずリストを設置することを求めていません。

---

中程度：ページネーション

<nav aria-label="Pagination">
  <ul>
    <li><a href="?page=1" rel="prev">Previous</a></li>
    <li><a href="?page=1" aria-label="Page 1">1</a></li>
    <li><a href="?page=2" aria-label="Page 2" aria-current="page">2</a></li>
    <li><a href="?page=3" rel="next">Next</a></li>
  </ul>
</nav>

スペースに余裕がある場合は、「Previous」／「Next」のテキストを表示してください。矢印のみを表示する場合は、アクセシブルネームに「Previous」／「Next」を含めてください。現在のページは、色以外でも視覚的に区別できるようにしてください。利用できない「Previous」／「Next」の操作にリンクを作成しないでください。ページネーションの URL では、フィルター、検索語、並べ替え順を維持してください。

---

中程度：レスポンシブ（モバイル）ナビゲーション

一般的なレスポンシブメニューは、デザイン上モーダルナビゲーションドロワーが本当に必要な場合を除き、非モーダルのディスクロージャーとして扱ってください。通常のハンバーガーメニューでは、ページの残りの部分に inert を適用しないでください。

<button type="button" id="navigation-toggle" aria-expanded="false" aria-controls="responsive-navigation">
  <span>Menu</span>
  <svg aria-hidden="true" focusable="false"></svg>
</button>
<nav id="responsive-navigation" aria-label="Primary" hidden>
  <ul><li><a href="/">Home</a></li></ul>
</nav>

const toggle = document.getElementById('navigation-toggle');
const navigation = document.getElementById('responsive-navigation');

function setNavigationOpen(open) {
  toggle.setAttribute('aria-expanded', String(open));
  navigation.hidden = !open;
}
toggle.addEventListener('click', () => setNavigationOpen(toggle.getAttribute('aria-expanded') !== 'true'));
navigation.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') { setNavigationOpen(false); toggle.focus(); }
});

非モーダルのディスクロージャーでは、DOM 順序でトグルをナビゲーションの直前に配置してください。ページの残りの部分を inert にしないでください。フォーカスをトラップしないでください。最初のリンクにフォーカスを強制移動しないでください（Tab キーを押すと、トグルから開いたナビゲーションへ自然に移動します）。Escape キーで閉じてフォーカスを戻せるようにし、ナビゲーションの後にあるリンクにも引き続きアクセスできるようにしてください。

ナビゲーションが本当にモーダルドロワーである場合は、フォーカスの封じ込め、アクセシブルネーム、視認できる閉じるボタン、Escape キーへの対応、背景の inert 化、フォーカスの復元を備えた完全なモーダルダイアログとして実装してください。完全なモーダル操作を実装せずに inert を適用して、部分的なモーダル状態を作らないでください（skills/keyboard/SKILL.md を参照）。

---

中程度：一貫したナビゲーションとページを見つける複数の方法

一連のページで繰り返し使われるナビゲーションは、ユーザーが変更を開始しない限り、同じ相対的な順序で表示する必要があります（WCAG 3.2.3）。繰り返し使われるリンクの名前と移動先は一貫させてください。ユーザーが明示的に操作できるパーソナライズ機能がない限り、推測したユーザーの特性に基づいてナビゲーションの順序を変更しないでください。

一連のページに含まれる各ページには、プロセス内の手順または結果である場合を除き、そのページを見つける方法を複数用意してください（WCAG 2.4.5）。階層型ナビゲーション、サイト内検索、サイトマップ、目次、インデックスなどが該当します。同じリストを異なる形で表示しても、実質的に異なる方法とはみなされません。

---

中程度：クライアントサイドルーティングと動的ナビゲーション

ルートの変更時には、新しいページのコンテキストが明確になるようにしてください。ドキュメントタイトルとメイン見出し／現在地の状態を更新し、論理的な対象にフォーカスを移動し、戻る／進むの操作を維持し、重複したアナウンスを避けてください。

<main id="main-content">
  <h1 id="page-heading" tabindex="-1">Account settings</h1>
</main>

document.title = 'Account settings · Service name';
document.getElementById('page-heading').focus();

見出しへのフォーカス、メイン領域へのフォーカス、強い通知を行うライブリージョン、ルート変更のアナウンスを自動的にすべて組み合わせないでください。出力が繰り返されたり中断されたりします。テスト済みの方法を1つ選んでください。ルートを変更するリンクでは、実際の <a> のセマンティクスを維持してください。JavaScript でルートを処理するという理由だけで、ナビゲーションにボタンを使用しないでください。

---

リフロー、ズーム、拡大表示

ズーム率200％／400％および幅の狭いビューポートでは、2次元スクロールが発生しないようナビゲーションをリフローしてください。コントロール、ラベル、フォーカスインジケーターが切り取られないようにしてください。固定表示のナビゲーションがビューポートの不合理な割合を占めたり、フォーカス中のコンポーネントを覆ったりしないようにしてください。ユーザーが常時表示されるオーバーレイを閉じられるようにしてください。タッチターゲットが重ならず、操作可能な状態を保つようにしてください。ウィンドウのサイズ変更だけでなく、実際のブラウザーズームを使用し、縦向きと横向きの両方でテストしてください。

CMS とフレームワークに関する注意事項

Drupal： Menu モジュールは <nav> マークアップを生成します。アクティブトレイルの .is-active クラスだけでは aria-current="page" は追加されません。 プログラムで設定する必要もあります。 Drupal アクセシビリティコーディング標準を参照してください。

WordPress： ブロックテーマは <nav> ランドマークを使用しますが、複数のメニューがある場合、wp_nav_menu() はデフォルトでは aria-label を追加しません。nav_menu_args フィルターを使用してください。

React／SPA フレームワーク： ナビゲーション後にページの変更を通知する必要があります（上記の「クライアントサイドルーティング」を参照）。これがないと、スクリーンリーダーの利用者にはルート変更後に何も伝わりません。

CMS／フレームワークが生成したナビゲーションを確認する際は、ネイティブのリンクとランドマークが使用されていること、開閉コントロールの関連付けに安定した ID が使われていること、aria-current が正しく追加・更新されていること、表示名とアクセシブルな名前が一致していること、サイトナビゲーションにメニューのロールが追加されていないこと、aria-expanded と hidden の状態が同期していること、非表示のレスポンシブ対応バリエーションがフォーカス順序とアクセシビリティツリーから除外されていることを確認してください。個々のページにパッチを適用するより、共有テンプレートを修正してください。

---

テスト

• 構造： ランドマークリストを調べ、主要な領域を区別できることを確認します。付随的なリンクのグループが不要なランドマークを作らないこと、同一のナビゲーションが繰り返される場合に一貫した名前が使われること、現在の項目が表示され、プログラムから識別できることを確認します。
• キーボード： スキップリンクを使い、フォーカスとビューポートが移動することを確認します。すべてのナビゲーションコントロールを Tab／Shift+Tab で順に操作します。Enter／Space で各開閉コントロールを開閉します。Escape で開いているサブメニューとレスポンシブナビゲーションが閉じることを確認します。フォーカスが閉じ込められたり、失われたり、遮られたりしないことを確認します。サイトナビゲーションの操作にアプリケーションメニュー用の矢印キーが必要ないことを確認します。
• ポインター／タッチ／音声： マウス、タッチ、大きなポインターで操作します。ホバーで表示されるコンテンツを閉じられること、ホバーで操作できること、または表示状態を維持できることを確認します。表示ラベルがアクセシブルな名前に含まれていることを確認し、表示ラベルを音声で発話してコントロールを操作します。
• リフロー： 200％／400％のズーム、320px のビューポート、縦向き／横向き、テキスト間隔の上書き、ライト／ダーク／強制カラーモードをテストします。
• ルート／回復性： プログレッシブエンハンスメントが必要な場合は、JavaScript を無効にしてリンクをたどります。戻る／進む／再読み込み／ディープリンク／コピーした URL をテストします。ルート変更によってタイトル／見出し／フォーカス／現在状態が更新され、通知が重複しないことを確認します。長いラベル、ローカライズ、RTL テキストをテストします。

自動チェックでは、ID の重複、壊れた aria-controls 参照、ランドマーク名の欠落／重複、無効なメニューのロール、aria-expanded と hidden の不整合、非表示または inert なナビゲーション内にフォーカス可能なコンテンツがあることを検出できます。ただし、ラベルが理解しやすいか、リンクの目的が明確か、ナビゲーションモデル全体が使いやすいかは判断できません。キーボード、スクリーンリーダー、拡大表示、タッチによる手動テストも継続してください。

---

完了条件チェックリスト

• <nav> ランドマークで、主要なナビゲーション領域（付随的なリンクリストは除く）をすべて囲んでいる
• すべての <nav> に、固有でわかりやすい名前が付いている（名前にロールを表す語を含めない）
• スキップリンク：<body> の先頭付近にあり、フォーカス時に表示され、遷移先に tabindex="-1" が設定されている
• aria-current に、関係性に合った値（page/step/location/true）を使用している
• サイトナビゲーションで role="menu"/"menuitem"/"menubar" を使用していない
• ドロップダウンに Disclosure パターンを使用している：aria-expanded、aria-controls、hidden
• 最上位のリンクとドロップダウンのトリガーが別々の要素になっている
• Escape キーでドロップダウン／レスポンシブナビゲーションが閉じ、トリガーにフォーカスが戻る
• ホバーで表示されるコンテンツは、閉じることができ、ホバー可能で、表示状態を維持できる（WCAG 1.4.13）
• パンくずリスト：<ol> を使用し、名前付きランドマークを設定し、現在の項目に aria-current="page" を指定している
• ページネーション：名前付きランドマークを設定し、Previous／Next にアクセシブルな名前を付け、現在のページに aria-current を指定している
• レスポンシブナビゲーションは、完全な非モーダルパターンまたは完全なモーダルパターンのいずれかで実装している。inert を部分的に使うハイブリッドにはしていない
• 繰り返し表示されるナビゲーションは、ページ間で相対的な順序を一貫させている
• WCAG 2.4.5 が適用される場合、ページを見つける複数の方法を用意している
• SPA／フレームワーク：ルート変更後にフォーカスを移動し、ページタイトルを読み上げている。重複した読み上げは発生しない
• 音声コントロールをテスト済み：表示されているテキストを発話して、すべてのリンクを有効化できる
• 200%／400% のズームでテスト済み：ナビゲーションがコンテンツを覆わない
• NVDA+Chrome、JAWS+Chrome、VoiceOver+Safari でテスト済み

---

主要な WCAG 基準

• 2.4.1 ブロックスキップ（A）— スキップリンクがない、または機能しない場合は重大
• 2.4.3 フォーカス順序（A）
• 2.4.4 リンクの目的（コンテキスト内）（A）
• 2.4.5 複数の手段（AA）
• 2.4.7 フォーカスの可視化（AA）
• 2.4.11 フォーカスが隠されないこと（最低限）（AA、WCAG 2.2）
• 1.4.13 ホバーまたはフォーカスで表示されるコンテンツ（AA）
• 2.5.3 ラベルを含む名前（A）— 違反すると音声コントロールに重大な問題が生じる
• 3.2.3 一貫したナビゲーション（AA）
• 3.2.4 一貫した識別（AA）
• 4.1.2 名前、役割、値（A）— aria-expanded が更新されない場合は重大

---

参考資料

• ベストプラクティスの完全ガイド
• 厳選リソース — ナビゲーション
• WAI メニューのチュートリアル
• WAI-ARIA APG — Disclosure ナビゲーション
• WAI-ARIA APG — Menubar — アプリケーションのツールバーのメニューに限る
• Adrian Roselli — menu の使用には注意
• Drupal アクセシビリティコーディング標準
• WCAG 2.2 の解説 3.2.3 一貫したナビゲーション
• WCAG 2.2 の解説 2.4.5 複数の手段

標準の見通し： これらのルールは WCAG 2.2 AA を対象としています。WCAG 3.0 では、ナビゲーション要件に破壊的な変更が加わる予定はありません。 最新情報を確認してください：https://www.w3.org/TR/wcag-3.0/