ナビゲーション

リンクで説明したように、href 属性を持つ <a> 要素は、ユーザーがクリックまたはタップして移動できるリンクを作成します。リストでは、コンテンツのリストを作成する方法を学びました。このモジュールでは、リンクのリストをグループ化してナビゲーションを作成する方法について説明します。

ナビゲーションにはいくつかの種類があり、表示方法もいくつかあります。同じウェブサイト内の他のページにリンクするテキスト内の名前付きアンカーは、ローカル ナビゲーションと見なされます。一連のリンクで構成され、サイトの構造に対する現在のページの階層、またはユーザーが現在のページにたどり着くまでにたどったページを表示するローカル ナビゲーションは、パンくずリストと呼ばれます。

ページの目次もローカル ナビゲーションの一種です。サイトのすべてのページへの階層リンクを含むページをサイトマップと呼びます。ウェブサイトのトップレベル ページにつながるナビゲーション（通常はすべてのページに表示される）は、グローバル ナビゲーションと呼ばれます。グローバル ナビゲーションは、ナビゲーション バー、プルダウン メニュー、フライアウト メニューなど、さまざまな方法で表示できます。同じサイトでも、ビューポートのサイズに応じてグローバル ナビゲーションの表示が異なる場合があります。

ユーザーが最小限のクリック数でサイトのどのページにも移動できるようにしつつ、ナビゲーションが直感的でわかりやすいようにしてください。ただし、ナビゲーション要素に関する特定の要件はありません。MachineLearningWorkshop.com はシングル ページ ウェブサイトで、右上隅にローカル ナビゲーション バーがあります。複数ページのサイトでは、グローバル ナビゲーションがここに配置されることがよくあります。

「コンテンツに進む」リンク

一部のサイトでは、[コンテンツにスキップ] リンクがフォーカス順序の最初の要素として表示されます。次のような内容が表示されます。

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

クリックされた場合、またはフォーカスがあり、ユーザーが Enter を押した場合、ページをスクロールして main ID を持つ要素（おそらくメイン コンテンツ）にフォーカスを移動します。

<main id="main">

ユーザビリティとアクセシビリティを向上させるには、共有の見出しやメイン ナビゲーション アイテムなど、すべてのページで繰り返されるコンテンツのブロックをユーザーがスキップできるようにすることが重要です。スキップリンクを使用すると、キーボード ユーザーが tab を押したときに、ページ上の新しいコンテンツにすばやく移動できます。これにより、長いメニューをタブで移動する必要がなくなります。

ほとんどのデザイナーは、このようなリンクがページの上部に表示されることを好みません。そのリンクを非表示にしても問題ありません。ただし、キーボード ユーザーがページ上のリンクをタブで移動したときにリンクにフォーカスが当たると、リンクがユーザーに表示される必要があります。

.visually-hidden:not(:focus):not(:active) と同様のセレクタを使用して、フォーカスされていない非アクティブな状態のコンテンツのみを非表示にします。

すべてのリンクテキストと同様に、リンクの移動先を明確に示している必要があります。リンク先は、ページのメイン コンテンツの先頭にする必要があります。

目次

メイン コンテンツの最初の要素は、このページのタイトル <h1>Navigation</h1> を含む <h1> 見出しです。メインの見出しの後に、このチュートリアルの内容の簡単な説明が続きます。

画面が小さい場合は、目次は見出しの後に表示されます。画面が大きい場合は、右揃えのサイドバーに表示されます。

ナビゲーション セクションに最適な要素は <nav> です。これにより、セクションに navigation（ランドマーク ロール）のロールがあることがスクリーン リーダーと検索エンジンに自動的に通知されます。

ナビゲーションの目的の簡単な説明として aria-label 属性を含めます。この場合、その属性の値は「このページについて」というテキストと重複するためです。表示されているテキストを参照するには、代わりに aria-labelledby を使用します。

id を使用すると、次のようになります。

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

冗長性を減らすだけでなく、表示されるテキストは翻訳サービスによって翻訳されますが、属性値は翻訳されない場合があります。十分なラベルを提供するテキストが存在する場合は、属性テキストを使用する代わりに、そのテキストを参照します。

[このページの内容] ナビゲーションは目次です。aria-label を使用する場合は、表示テキストを繰り返すのではなく、そのコンテキストを指定します。

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

要素にユーザー補助機能向けの名前を指定する場合は、要素の名前を含めないでください。スクリーン リーダーは、要素の名前をユーザーに提供します。たとえば、<nav> 要素を使用する場合は、「ナビゲーション」という単語を含めないでください。その情報はセマンティック要素にすでに含まれています。

ナビゲーション アイテムをリストにネストする必要はありませんが、リストを使用すると、スクリーン リーダーのユーザーはナビゲーションにリスト アイテム（つまりリンク）がいくつあるかを知ることができます。

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

タブの順序を変更しない

目次は、見出しの後に表示されることも、小さい画面に表示されることも、右揃えのサイドバーに表示されることもあります。2 つの同一のナビゲーション セットを含め、1 つだけを表示するのはアンチパターンです。

1254 ピクセルを超える幅のページでは、CSS を使用してナビゲーションをサイドバーとして表示しています。

ユーザーは、デバイスを変更したりフォントサイズを大きくしたりすると、コンテンツがレスポンシブになり、位置が変わることに慣れていますが、タブの順序が変わることは想定していません。ページ レイアウトは、サイト全体でアクセスしやすく、予測可能で、一貫性がある必要があります。ここでは、目次の場所を予測できません。

ページのパンくずリスト

パンくずリストは、ユーザーがウェブサイトのどこにいるかを把握できるようにする、補助的なナビゲーションです。パンくずリストは通常、現在のドキュメントの URL 階層と、サイト構造内の現在のページの位置を示します。

ユーザーから見たサイト構造は、サーバー上のファイル構造と異なる場合がありますが、問題ありません。ユーザーはファイルの整理方法を知る必要はありませんが、コンテンツをナビゲートできる必要があります。

パンくずリストは、サイトの構成をユーザーに伝えるものです。これにより、ユーザーは back 関数を使用して、以前にアクセスしたすべてのページを戻ることなく、祖先セクションに移動できます。

web.dev のようにサイトに階層型ディレクトリ構造がある場合、パンくずリスト ナビゲーションには、ホームページまたはホスト名へのリンクと、URL パスの各ディレクトリのインデックス ファイルへのリンクが含まれていることがよくあります。現在のページを含めるかどうかは任意ですが、少し注意が必要です。

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

パンくずリストの各セクションには、現在のページからホームページまでのパスが表示され、その間の各レベルが示されます。

Learn HTML の各モジュール ページには、同じパンくずリスト ナビゲーションが表示され、web.dev の Learn セクション内の HTML レッスンの階層が表示されます。

コードは次のようになります。

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

ランドマーク ロールである <nav> 要素は、ページ上のナビゲーション要素としてパンくずリストを表示するよう支援技術に指示します。aria-label で提供される「パンくずリスト」のアクセシブルな名前は、同じドキュメント内の他のナビゲーション ランドマークとこのナビゲーションを区別します。

各リンクの間にはコンテンツの区切り文字があります。これらの区切り文字は、CSS で生成して、2 番目以降の各リスト項目の前に表示できます。

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

スクリーン リーダーはこれらのアイコンを「認識」しません。これはベスト プラクティスです。パンくずリストのリンク間の区切り文字は、スクリーン リーダーの対象から除外する必要があります。また、ページの他のテキストや視覚要素と同様に、背景とのコントラストが十分である必要があります。

サンプルコードでは、順序付きリストを使用しています。項目が列挙されるため、順序なしリストよりも順序付きリストが望ましいです。role="list" が追加されたのは、一部の CSS display プロパティ値が一部の要素からセマンティクスを削除するためです。

一般的に、パンくずリストのホームページへのリンクは、サイト名やサイトロゴではなく「ホーム」と表示されるべきです。パンくずリストはドキュメントの最上部にあるため、このアンチパターンが使用された理由を理解できます。

現在のページである [Navigation] は、パンくずリストに含まれていません。

現在のページ

現在のページがパンくずリストに含まれている場合、テキストはリンクにしないことが望ましく、現在のページのリストアイテムに aria-current="page" を含める必要があります。含まれていない場合は、アイコンなどの記号で、次の見出しが現在のページであることを示すと便利です。

この演習で、パンくずリストの代替バージョンを見てみましょう。

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

パンくずリストは、ユーザーが現在のページにたどり着くまでにたどった線形の手順と同じではない場合があります。ここまでの手順のリストは <nav> 内にネストできますが、パンくずリストとしてラベル付けしないでください。

ローカル ナビゲーション

次のナビゲーション コンポーネントは、中型以上のデバイスのほとんどで左側のサイドバーに表示されます。フィルタバーと、Learn HTML の各セクションへのリンクが表示されます。これらのリンクとフィルタバーは、場所のナビゲーションです。

モバイル デバイスでこのサイトにアクセスした場合や、画面の幅が狭い場合は、このページを読み込むとサイドバーが非表示になります。上部のナビゲーションにある menu をクリックしてアクセスできます。

ワイド画面の永続的なローカル ナビゲーションと狭い画面のローカル ナビゲーションの主な違いは、メインの上部ナビゲーションに戻ってナビゲーションを閉じる矢印があることです。

このドキュメントへのリンクは、ローカル ナビゲーションの他のリンクと同じように表示されます。ただし、視覚障碍のあるユーザーに現在のページであることを示すために、他のリンクとは少し異なる外観になることがあります。この視覚的な違いは CSS で作成する必要があります。

現在のページは aria-current="page" 属性で識別することもできます。これにより、リンクが現在のページへのリンクであることを補助技術に通知します。

理想的には、ローカル ナビゲーション内のこのリストアイテムの HTML は次のようになります。

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

グローバル ナビゲーション

グローバル ナビゲーションはウェブサイトのトップレベルのページに移動し、サイトのすべてのページで同じです。サイトのグローバル ナビゲーションは、サイトのすべてのサブセクションや他のメニューにリンクするリンクのネストされたリストを開くタブで構成されている場合もあります。タイトル付きのセクション、ボタン、検索ウィジェットなどが含まれる場合があります。これらの追加機能は必須ではありません。必要なのは、ナビゲーションがすべてのページに表示され、すべてのページで同じであることです。もちろん、現在のページへのリンクには aria-current="page" が含まれます。

グローバル ナビゲーションは、アプリケーションやウェブサイトのどこにでも移動できる一貫した手段を提供します。Google のウェブサイトのページ上部にはグローバル ナビゲーションがありません。Yahoo! は、Yahoo! の主要なプロパティはそれぞれスタイルが異なりますが、ほとんどのセクションのコンテンツは同じです。

ニュースとスポーツのグローバル ナビゲーション ヘッダーの内容は同じです。ただし、ユーザーがスポーツ ページにアクセスしていることを示すアイコンは、視力が正常なユーザーでもアクセスできるように、十分なコントラストがありません。どちらのセクションにも、グローバル ナビゲーションがあり、その下にセクション固有のローカル ナビゲーションがあります。

グローバル ナビゲーションと同様に、フッターはすべてのページで同じにする必要があります。ただし、類似点はそれだけです。グローバル ナビゲーションを使用すると、サイトのすべての部分に商品という観点から移動できます。フッター内のナビゲーション要素には、特定の要件はありません。

通常、フッターには、法的声明、会社概要、採用ページ、ソーシャル メディアなどの関連する外部ソースへのリンクなど、企業のリンクが含まれます。

このページのフッターには、2 つのナビゲーション要素のセットがあります。関連する web.dev ナビゲーションの 3 列セットと、Google の利用規約とプライバシーに関するナビゲーションです。フッター ナビゲーションには、web.dev への投稿方法、web.dev チームが提供する関連コンテンツ、外部のソーシャル メディア リンクが含まれています。

次は、データテーブルのマークアップについて説明します。

理解度を確認する

ナビゲーションに関する知識をテストします。