ナビゲーション

リンクで説明したように、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) のようなセレクタを使用して、フォーカスされていないコンテンツやアクティブではない状態のコンテンツのみを非表示にします。

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

目次

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

<ph type="x-smartling-placeholder">

</ph>

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

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

<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; でどちらか一方を非表示にします。

1 つのウィジェットのみを表示するために同一のウィジェットを 2 つ含めることは、アンチパターンです。余分なバイトはごくわずかです。HTML コンテンツを次の場所から隠す CSS display: none を使用するすべてのユーザーが適切です。問題は、ワイド画面では目次が #main の前に来ることです。 横幅が狭い画面では、目次が #main 内にネストされています。キーボードを使って表上でスキップする コンテンツを視聴したりできますユーザーは、コンテンツがレスポンシブであることや、デバイスや場所を変更したときに場所が変わることに慣れていますが、 フォントサイズを大きくするため、それによってタブの順序が変わるとは想定していません。ページ レイアウトはアクセスしやすく、予測可能で、 サイト全体で整合性を維持しますここでは、目次の場所は予測不可能です。

ページのパンくずリスト

パンくずリストは、ユーザーがウェブサイトのどこにいるかを把握するための 2 つ目のナビゲーションを提供します。通常は 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 モジュール ページには同じパンくずリスト ナビゲーションがあり、HTML レッスンの階層が表示されます。 web.dev の learn セクション。コードは以下のようになります。わかりやすくするために、クラスと 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
}

スクリーン リーダーはベスト プラクティスとして、パンくずリストのリンクをスクリーン リーダーで区切らないようにする必要があります。 また、通常のテキストと同じように、背景とのコントラストを十分に確保する必要があります。

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

通常、パンくずリストのホームページへのリンクは「ホーム」にする必要があります。サイト名を含むサイトロゴではなく できます。しかし、パンくずリストはドキュメントの上部にあり、ページ上に唯一のロゴなので、これは理にかなっています。 アンチパターンが使われた理由を説明します

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

現在のページ

現在のページ「ナビゲーション」はパンくずリストに含まれていません。現在のページが テキストはリンクにしないことをおすすめします。また、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 個の各セクションへのリンク。各リンクにはチャプター番号、 セクション タイトルが表示され、アクセスしたことのあるセクションの右側にチェックマークが表示されます。「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 は、以前にこのページにアクセスしたことがないユーザーに対しては、display: none data-complete="true" 属性と値:

.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!プロパティのスタイルが異なっている場合、 ほとんどのセクションは同じです

ニュースとスポーツのグローバル ナビゲーション ヘッダーの内容は同じだが、ユーザーが現在アクセス中であることを示すアイコンが コントラストが十分でないため視力の弱い方にも対応できます。どちらのセクションにもグローバル その下にセクション固有のローカル ナビゲーションが配置されています。

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

このページのフッターには、さらに 3 つの <nav> 要素（フッター ナビゲーション、Google Developers、利用規約とポリシー）が含まれます。 それぞれがリンクです。フッター ナビゲーションには、GitHub の web.dev に投稿する方法や、 web.dev 外の Google、および外部の「接続方法」リンクをご覧ください。

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

理解度をチェックする

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