【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
全てのウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
パンくずリストは、コンテンツがどのような構造になっていたのか、及びこれまでにたどってきたウェブページへ戻る方法を、利用者が想起する助けとなり、また一連のウェブページの中で現在位置を特定する。パンくずリストには、利用者がそのウェブページに到達するまでに通ってきた場所、又はサイトの編成における現在のウェブページの位置が表示されている。
パンくずリストは、現在のウェブページまでナビゲートする途中にアクセスしたウェブページへのリンクを使って実装される。パンくずリストは、ウェブページ一式の各ウェブページの中で同じ位置に置く。
目に見える区切り文字でパンくずリストの中の項目を切り離すと、利用者の助けになる。区切り文字の例には「>」、「|」、「/」、「::」、及び「→」がある。
開発者が、ハイパーリンクを作成する方法を見つけるために、オーサリングツールのメーカーのウェブサイトの中を探している。検索結果を使って、オーサリングツールを使用してハイパーリンクを作成するための詳しい説明があるウェブページへ行く。そのページには、以下のようなリンクでできたパンくずリストがある:
コード例:
Home :: Developer Center :: How To Centerこの例では、パンくずリストには現在のウェブページのタイトルである「ハイパーリンクを作成する方法」が含まれていない。その情報はウェブページのタイトルとして入手できる。
写真家の作品集のウェブサイトはいろいろなギャラリーに分かれていて、各ギャラリーはさらに分類ごとに分割されている。サイトの中で Gentoo Penguin の写真を含むウェブページに移動する利用者は、ウェブページの冒頭で以下のようなパンくずリストを見る:
コード例:
Home / Galleries / Antarctica / Penguins / Gentoo Penguin"Gentoo Penguin" を除くすべての項目がリンクとして実装されている。現在位置 (Gentoo Penguin) はパンくずリストに含まれているが、リンクとしては実装されていない。
e コマースサイトの情報設計が、一般から特定の製品区分に徐々に分類されている。
You are here: Acme Company → Electronics → Computers → Laptops
パンくずリストが "You are here" で始まり、現在利用者がいるページで終わる。リストに入っている項目は、"You are here" 及び "Laptops" を除いて、クリック又はタップ可能なリンクである。この例は、右向き矢印 (→) を区切り位置として使用している。
この例では、h2 要素、aria-label 属性を指定した nav 要素、非順序のリストがセマンティクスを提供するために使われている。このマークアップは、CSS によるスタイル指定によって水平のパンくずリストとして表示されるだろう。
この例に対する HTML
コード例:
<nav aria-label="Breadcrumbs">
<h2>You are here:</h2>
<ul>
<li><a href="/">Acme Company</a> →</li>
<li><a href="/electronics/">Electronics</a> →</li>
<li><a href="/electronics/computers/">Computers</a> →</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 もあわせて参考になる。
ウェブページ一式の中にパンくずリストが実装されているとき:
あるウェブページに移動する。
パンくずリストが表示されていることを確認する。
パンくずリストが、現在位置に達する正しいナビゲーションの順序、又はサイト構造内の現在位置までの正しい階層の経路を表示していることを確認する。
現在位置を含んでいないパンくずリストの場合:
パンくずリストのすべての要素がリンクとして実装されていることを確認する。
現在位置を含んでいるパンくずリストの場合:
現在位置を除くすべての要素がリンクとして実装されていることを確認する。
現在位置がリンクとして実装されていないことを確認する。
すべてのリンクが、パンくずリストによって指定された正しいウェブページへ移動することを確認する。
パンくずリストを使用している一連のすべてのウェブページについて:
2.、3.、及び 6.の結果が真である。
その上で、4.又は 5.のいずれかが真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。