WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用(対象)

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

これは、次の達成基準に関連する達成方法である:

解説

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

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

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

事例

事例 1

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

コード例:

ホーム :: デベロッパーセンター :: 手引き

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

事例 2

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

コード例:

ホーム / ギャラリー / 南極大陸 / ペンギン / ジェンツーペンギン

「ジェンツーペンギン」を除くすべての項目がリンクとして実装されている。現在位置(ジェンツーペンギン)はパンくずリストに含まれているが、リンクとしては実装されていない。

事例 3

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

現在位置: Acme Company → 電化製品 → コンピューター → ノートパソコン

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

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

この例に対するHTML

コード例:

 
          <nav aria-label="Breadcrumbs"> 
            <h2>現在位置:</h2> 
            <ul>
              <li><a href="/">Acme Company</a> &#8594;</li> 
              <li><a href="/electronics/">電化製品</a> &#8594;</li>
              <li><a href="/electronics/computers/">コンピューター</a> &#8594;</li>
              <li>ノートパソコン</li>
            </ul> 
          </nav>
      

この例に対するCSS

コード例:

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

実装例: Breadcrumb example

参考リソース

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

検証

チェックポイント

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

  1. あるウェブページに移動する。

  2. パンくずリストが表示されている。

  3. パンくずリストが、現在位置に達する正しい案内の順序、又はサイト構造において現在位置までの正しい階層の経路を表示している。

  4. 現在位置を含んでいないパンくずリストに:

    1. パンくずリストのすべての要素がリンクとして実装されている。

  5. 現在位置を含んでいるパンくずリストに:

    1. 現在位置を除くすべての要素がリンクとして実行されている。

    2. 現在位置がリンクとして実装されていない。

  6. すべてのリンクが、パンくずリストによって指定された正しいウェブページへ移動する。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。