パンくずリストを提供する

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

全てのウェブコンテンツ技術

これは達成基準2.4.8: 現在位置 (十分な達成方法) に関連する達成方法である。

解説

パンくずリストは、コンテンツがどのような構造になっているのか、及び前のウェブページへ戻る方法を視覚化するのに利用者の助けとなり、かつ一連のウェブページの中で現在位置を特定する。パンくずリストには、利用者がそのウェブページに到達するまでに通ってきたパス、又はサイトの編成における現在のウェブページの位置が表示されている。

パンくずリストは、現在のウェブページまでナビゲートする途中にアクセスしたウェブページへのリンクを使って実装される。パンくずリストは、ウェブページ一式の各ウェブページの中で同じ位置に置かれる。

目に見える区切り文字でパンくずリストの中の項目を切り離すと、利用者の助けになる。区切り文字の例には「>」、「|」、「/」、「::」、及び「→」がある。

事例

事例 1

開発者が、ハイパーリンクを作成する方法を見つけるために、オーサリングツールのメーカーのウェブサイトの中を探している。検索結果を使って、オーサリングツールを使用してハイパーリンクを作成するための詳しい説明があるウェブページへ行く。そのページには、以下のようなリンクでできたパンくずリストがある:

              Home :: Developer Center :: How To Center
            

この例では、パンくずリストには現在のウェブページのタイトルである「ハイパーリンクを作成する方法」が含まれていない。その情報はウェブページのタイトルとして入手できる。

事例 2

写真家の作品集のウェブサイトはいろいろなギャラリーに分かれていて、各ギャラリーはさらに分類ごとに分割されている。サイトの中で Gentoo Penguin の写真を含むウェブページに移動する利用者は、ウェブページの冒頭で以下のようなパンくずリストが目に入る:

              Home / Galleries / Antarctica / Penguins / Gentoo Penguin
            

"Gentoo Penguin" を除くすべての項目がリンクとして実装されている。現在位置 (Gentoo Penguin) はパンくずリストに含まれているが、リンクとしては実装されていない。

事例 3

e コマースサイトの情報設計が、一般から特定の製品区分に徐々に分類されている。

You are here: Acme Company → Electronics → Computers → Laptops

パンくずリストが "You are here" で始まり、現在利用者がいるページで終わる。リストに入っている項目は、"You are here" 及び "Laptops" を除いて、クリック又はタップ可能なリンクである。この例は、右向き矢印 (→) を区切り位置として使用している。

この例では、h2 要素、 aria-label 属性を指定した nav 要素、非順序のリストがセマンティクスを提供するために使われている。このマークアップは、CSS によるスタイル指定によって水平のパンくずリストとして表示されるだろう。

コード例

 
          <nav aria-label="Breadcrumbs"> 
          <h2>You are here:</h2> 
            <ul>
              <li><a href="/">Acme Company</a> &#8594;</li> 
              <li><a href="/electronics/">Electronics</a> &#8594;</li>
              <li><a href="/electronics/computers/">Computers</a> &#8594;</li>
              <li>Laptops</li>
            </ul> 
          </nav>
      

この例に対する CSS

 
      nav, h2, ul, ul li{ display: inline;}
      nav > h2{ font-size: 1em; } 
      ul { padding-left: 0em; }
      

実装例: Breadcrumb example

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注:

パンくずリストについては、パンくずリスト | 検索 | Google Developers 及び Markup: Breadcrumbs - Bing Webmaster Tools もあわせて参考になる。

検証

手順

ウェブページ一式の中にパンくずリストが実装されているとき:

  1. あるウェブページに移動する。
  2. パンくずリストが表示されていることを確認する。
  3. パンくずリストが、現在位置に達する正しいナビゲーションの順序、又はサイト構造内の現在位置までの正しい階層の経路を表示していることを確認する。
  4. 現在位置を含んで いない パンくずリストの場合:

    1. パンくずリストのすべての要素がリンクとして実装されていることを確認する。
  5. 現在位置を含んでいるパンくずリストの場合:

    1. 現在位置を除くすべての要素がリンクとして実装されていることを確認する。
    2. 現在位置がリンクとして実装されていないことを確認する。
  6. すべてのリンクが、パンくずリストによって指定された正しいウェブページへ移動することを確認する。

期待される結果

  • パンくずリストを使用している一連のすべてのウェブページについて:

    • 2.、3.、及び 6.の結果が真である。
    • その上で、4.又は 5.のいずれかが真である。