ナビゲーション

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

ナビゲーションにはいくつかのタイプがあり、表示する方法もいくつかあります。同じウェブサイト内の他のページにリンクするテキスト内の名前付きアンカーは、ローカル ナビゲーションと見なされます。ローカル ナビゲーションは、サイトの構造に対する現在のページの階層（ユーザーが現在のページにアクセスするためにたどったページ）を示す一連のリンクで構成されており、パンくずリストと呼ばれます。ページの目次も、別のタイプのローカル ナビゲーションです。サイト上のすべてのページへの階層型リンクを含むページは、サイトマップと呼ばれます。すべてのページにあるウェブサイトの最上位のページに移動するナビゲーション セクションをグローバル ナビゲーションといいます。グローバル ナビゲーションは、ナビゲーション バー、プルダウン メニュー、フライアウト メニューなど、さまざまな方法で表示できます。同じサイトで、ビューポートのサイズに応じてグローバル ナビゲーションの表示が異なる場合があります。

ユーザーがサイトのどのページにも最も少ないクリック数で移動できるようにすることを常に念頭に置き、直感的で過度にならないナビゲーションを心がけましょう。とはいえ、ナビゲーション要素に関する特定の要件はありません。MachineLearningWorkshop.com は単一ページのウェブサイトですが、右上にローカル ナビゲーション バーがあります。これは、複数ページのサイトでよくグローバル ナビゲーションを配置する場所です。

web.dev でこのページを表示すると、ナビゲーション機能がいくつかあることがわかります。タイトルの上にパンくずリストが表示され、タイトルの後に「このページで」の目次が表示されます。また、画面の幅に応じて、メニューボタンをクリックすると常に表示される「HTML 学習」の目次が表示されます。ページの最初の要素は #main への隠しリンクです。これにより、サイドバーとパンくずリストの両方のリンクをスキップできます。

[コンテンツに進む] リンク

ページの最初の要素は内部リンクです。

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

これにより、クリックされたとき、またはフォーカスがあるときにユーザーが Enter を押すと、ページがスクロールされて、メイン コンテンツ（id が main であるランドマーク <main>）にフォーカスが移動します。

<main id="main">

前のセクションをすべて読んでも、このサイトのリンクが見つからなかった可能性があります。 フォーカスがあるときにのみ表示されます。

ユーザビリティとアクセシビリティを改善するには、各ページで繰り返されているコンテンツのブロックをユーザーに無視できるようにすることが重要です。スキップリンクが含まれているので、キーボード ユーザーが読み込み時に tab を押したときに、サイトのメイン コンテンツにすばやくスキップでき、何度もタブに移動せずに済みます。このページのスキップリンクでは、セクション全体のサイドバー ナビゲーションとパンくずリスト ナビゲーションがスキップされ、ユーザーはページタイトルに直接移動します。

ほとんどのデザイナーは、ページの上部にリンクを表示するようなデザインは好みではありません。リンクを画面に表示しないようにしても問題ありません。ただし、リンクにフォーカスが当たると（キーボード ユーザーがページ上のリンクをタブで移動すると起こります）、そのリンクはすべてのユーザーに表示されるようにする必要があります。.visually-hidden:not(:focus):not(:active) のようなセレクタを使用して、フォーカスされていない、アクティブでない状態のコンテンツのみを非表示にする。

リンクテキストは「メインにスキップ」と表示されています。これがリンクのアクセス可能な名前です。これは技術サイトであるため、ユーザーはおそらく「メイン」の意味を理解しています。すべてのリンクテキストと同様に、ユーザー補助機能用の名前には、リンクがユーザーの移動先を明確に示す必要があります。リンク ターゲットは、ページのメイン コンテンツの先頭にする必要があります。これをテストするには、ページが読み込まれたら、Tab キーを押して [メインにスキップ] リンクに移動します。次に、Enter キーを押してメイン コンテンツに「ジャンプ」します。

目次

「コンテンツへスキップ」リンクは、メイン コンテンツをスクロールして表示します。最初の要素は、このセクションのタイトルを示す <h1> 見出しです。ここでは、<h1>Marking up navigation</h1> としています。メインの見出しの後に、このチュートリアルの内容の簡単な説明であるタグラインが続きます。目次のナビゲーションがコードベースの見出しの前か後かは、ブラウザの幅によって異なります。

ブラウザの幅が 80em を超える場合、目次がマークアップの見出しの前に配置されます。これは、次のようになります（マークアップを簡素化するためにクラス名は削除されています）。

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

<nav> は、ナビゲーションのセクションに使用するのに最適な要素です。セクションがランドマークの役割である navigation のロールを持っていることをスクリーン リーダーと検索エンジンに自動的に通知します。

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

非セマンティックな <div> を段落 <p> に変更してから、参照できるように id を追加します。次に、aria-labelledby を使用します。

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

冗長性の低減に加えて、表示されるテキストは翻訳サービスによって翻訳されますが、属性値は翻訳されない場合があります。可能であれば、適切なラベルを提供するテキストがある場合は、属性テキストよりもそのテキストを優先します。

このナビゲーションが目次です。aria-label を使用する場合は、表示されるテキストを繰り返すのではなく、その情報を指定します。

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

要素にアクセス可能な名前を指定する場合は、要素の名前を含めないでください。スクリーン リーダーはその情報をユーザーに提供します。たとえば、<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>

ブラウザの幅が 80 em 未満の場合は、見出しとキャッチフレーズの下に「このページ」ウィジェットが表示されます。これを行うには、目次ナビゲーション コンポーネントを 2 つ組み込み、メディアクエリに基づいて CSS display: none; でどちらか一方を非表示にします。

同じウィジェットを 2 つ含めて 1 つだけ表示すると、アンチパターンになります。余分なバイト数は無視できる。CSS の display: none を使用して HTML コンテンツをすべてのユーザーに表示しないようにするのは適切です。問題は、ワイド画面では目次が #main の前に来て、幅が狭い画面では目次が #main 内にネストされることです。キーボードを使用してコンテンツに進むと、ワイド スクリーンで目次をスキップします。ユーザーは、デバイスを変更したり、フォントサイズを拡大したりすると、コンテンツがレスポンシブで位置が変わることに慣れていますが、そのようなときにタブオーダーが変更されることは想定していません。ページ レイアウトは、アクセスしやすく、予測可能で、サイト全体で一貫している必要があります。この場合、目次の位置は予測できません。

ページのパンくずリスト

パンくずリストは、ユーザーがウェブサイトのどこにいるかを把握できるようにするためのセカンダリ ナビゲーションです。通常は、現在のドキュメントの 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"

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

すべての学習 HTML モジュール ページには同じパンくずリスト ナビゲーションがあり、web.dev の learn セクション内に HTML レッスンの階層が表示されます。コードは以下のようになります。わかりやすくするため、クラスと SVG の詳細が省略されています。

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

このパンくずリストはベスト プラクティスに準拠しています。ここではランドマークの役割である <nav> 要素を使用しているため、支援技術はパンくずリストをページのナビゲーション要素として表示します。 aria-label で指定された「パンくずリスト」のアクセス可能な名前により、現在のドキュメント内の他のナビゲーション ランドマークと区別されます。

リンク間に、CSS で生成されたコンテンツ セパレータがあります。区切り文字は、各リスト項目の前に配置され、2 番目の <li> から始まります。

[aria-label^="breadcrumb" 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
}

パンくずリストのリンクはスクリーン リーダーの「認識」されないため、スクリーン リーダーには表示されないようにします。 また、通常のテキストと同様に、背景に対して十分なコントラストをつける必要があります。

このバージョンでは、順序なしのリストとリストアイテムを使用します。順序付きリスト項目は列挙されるため、順序付きリストが推奨されます。また、これはリストでもあります。一部の CSS 表示プロパティ値により、一部の要素からセマンティクスが削除されているため、role="list" が再度追加されました。

通常、パンくずリストのホームページへのリンクは、サイト名をラベルにしたサイトロゴではなく、「ホーム」とする必要があります。しかし、パンくずリストはドキュメントの上部にあり、ページにロゴが表示される唯一の箇所であるため、このアンチパターンが使用された理由は理にかなっています。

最後の要素はカスタム <share-action> 要素です。カスタム要素についてはセクション 15 で説明します。このカスタム要素はパンくずリストの一部ではありませんが、すべてのページで一貫している限り、無関係な要素を <nav> に含めても問題ありません。

現在のページ

このページでは、現在のページ「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> 内にネストできますが、パンくずリストとしてラベル付けすることはできません。

地域のナビ

このページには、別のナビゲーション コンポーネントがあります。ワイド スクリーンを使用している場合は、左側にサイドバーが表示され、「HTML を学ぶ」ロゴ、検索バー、[HTML を学ぶ] の 20 の各セクションへのリンクが表示されます。各リンクには、チャプター番号、セクション タイトル、アクセスしたセクションの右側にあるチェックマークが表示されます。このバナーは、いったんページを移動して戻ってきた場合に、ここに表示されます。Learn HTML のすべてのセクションへのリンク、検索ヘッダー、ローカル ヘッダーは、ロケーション ナビゲーションです。

タブレットやモバイル デバイスでこのサイトにアクセスする場合や、画面が小さい場合は、このページを読み込んでもサイドバーは表示されません。これは、上部のナビゲーション バーのハンバーガー メニューから表示できます（はい。ヘッダーは role="navigation" が設定されたカスタムの <web-header> 要素です）。

ワイド画面の永続的なローカル ナビゲーションと、表示 / 非表示を切り替えられるローカル ナビゲーションの主な違いは、非表示にできるバージョンでは閉じるボタンが表示されることです。このアイコンは display: none; のワイド スクリーンで非表示になります。

このドキュメントへのリンク（セクション 010）は、目の見えるユーザーにこれが現在のページであることを示すため、ローカル ナビゲーションの他のリンクとは外観が若干異なります。このような視覚的な違いは CSS で生じます。現在のページは aria-current="page" 属性でも識別されます。これにより、現在のページへのリンクであると支援技術に伝えられます。このローカル ナビゲーション内のリストアイテムの HTML は次のようになります。

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

このページに初めてアクセスした場合、チェックマークは表示されません。以前にこのページにアクセスしたことがある場合は、data-complete カスタム属性が true に設定され、チェックマークが表示されます。各リンクにはチェックマークが含まれていますが、CSS は、data-complete="true" 属性と値が存在しないことに基づいて、display: none を使用して、このページにアクセスしたことのないユーザーに対してチェックボックスを非表示にします。

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

display が none 以外に設定されている場合、role はインライン SVG が画像であることを支援技術に通知し、aria-label が <img> の alt 属性として機能します。

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

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

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

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

グローバル ナビゲーションと同様に、フッターはすべてのページで同じにする必要があります。似ているのはこれだけです。グローバル ナビゲーションを使用すると、プロダクトの観点からサイトのすべての部分に移動できます。フッター内のナビゲーション要素には特定の要件はありません。通常、フッターには会社に関する法的な声明、会社、キャリアなどの会社のリンクが含まれ、ソーシャル メディアのアイコンなどの外部ソースにつながることがあります。

このページのフッターには、フッター ナビゲーション、Google Developers、利用規約とポリシーという 3 つの追加の <nav> 要素が含まれており、それぞれがリンクになっています。フッター ナビゲーションには、GitHub の web.dev に貢献する方法、web.dev 以外の Google が提供しているその他の教育コンテンツ、外部の「接続方法」リンクが含まれています。

<footer> 内のこれら 3 つのナビゲーションは <nav> 要素であり、aria-label により、これらのランドマークのロールにアクセス可能な名前が指定されます。 これまで見てきたナビゲーションはすべて、ナビゲーション内のリストにリンクをネストしていました。ここでは、独自のナビゲーションを作成するうえで知っておくべきポイントをすべて学びました。次は、データテーブルのマークアップについて見ていきます。

理解度チェック

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