パンくずリスト

W3C「Understanding WCAG 2.2: 1.4.1 Use of Color」。色を、情報を伝えるただひとつの見た目の手段にしないよう求めています（レベルA）。まわりの文字と色だけでしか見分けられないリンクを、失敗の例に挙げています。パンくずについて直接は書かれていません。

デジタル庁「design-system-example-components-html」のパンくずの CSS。ホバーで下線を太くし、ホバーの見た目はホバーできる環境だけで出しています。訪問済みと未訪問のリンクは同じ色にそろえています。

W3C「Understanding WCAG 2.2: 2.4.7 Focus Visible」。キーボードで操作できる画面では、いまどこにフォーカスがあるかが見えるようにするよう求めています（レベルAA）。

W3C「G65: Providing a breadcrumb trail」WCAG 2.2 Techniques。いまの場所をリンクにしないことで、見た目と意味の両方で前の項目と区別する例を挙げています。いまの場所をリンクのまま残す例も挙げ、そのときは aria-current などでプログラムからもわかるようにするとしています。

Page Laubheimer「Breadcrumbs: 11 Design Guidelines for Desktop and Mobile」Nielsen Norman Group、2018年。パンくずは閲覧の履歴ではなくサイトの階層を見せるもので、いまのページは末尾に載せてもリンクにしないよう勧めています。スマホでは何行にも折り返してつながりがわかりにくくなること、リンクを小さくしたり詰めたりするとタッチ画面では押しにくいことを挙げています。階層が1〜2段の平らなサイトでは要らないとしています。

MDN「ARIA: aria-current attribute」。aria-current="page" は、パンくずの中のいまの文書へのリンクのように、ページの集まりの中でいまのページを表すとしています。見た目で示していることを、支援技術を使う人にも伝えるためのものです。

IBM「Carbon Design System: Breadcrumb」、Microsoft「Fluent 2: Breadcrumb」。Carbon は、長いパンくずを2行に折り返さず、最初と最後のリンクを残して途中をメニューにたたむとしています。Fluent も、最初と最後の項目はいつも見せ、2番目の項目からたたむとしています。

Jakob Nielsen「Breadcrumb Navigation Increasingly Useful」Nielsen Norman Group、2007年。テストの参加者が「戻るボタン」をほしがったとき、本当に求めていたのは上の階層へのリンクの一覧だったという観察を紹介しています。検索や外のリンクから奥のページに来た人に、上の階層とのつながりを見せて助けになるとしています。

Bonnie Lida Rogers, Barbara Chaparro「Breadcrumb Navigation: Further Investigation of Usage」Usability News 5(2)、SURL、2003年。45人の調査で、パンくずをよく使った人は「戻る」を押す回数が少なかったと報告しています。一方で、見たページの数や課題にかかった時間には差がありませんでした。注の中で、パンくずが見せる道は利用者が通った道とは限らないので、この呼び名はすこし誤解をまねくと書いています。

Jamie Holst「E-Commerce Sites Need 2 Types of Breadcrumbs (68% Get it Wrong)」Baymard Institute、2013年。商品ページからひとつ上の分類へ戻れないと、利用者はトップの分類を選び直したり検索し直したりと大きく飛び越えるか、商品ページから動けなくなると報告しています。

W3C「Understanding WCAG 2.2: 2.4.8 Location」。ページの集まりの中で、いまどこにいるかがわかるようにするよう求めています（レベルAAA）。認知に障害のある人や、長い手順で迷いやすい人、奥のページに直接来た人の助けになるとし、手段の例にパンくずを挙げています。

GOV.UK Design System「Breadcrumbs」。長いパンくずを、スマホでは最初と最後の項目だけにする設定を用意しています。

Edward Scott「6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs」Baymard Institute、2020年。スマホの商品ページで、ホームといまのページを省いても、テストで悪い影響はなかったと報告しています。それでも長いときに試してみる価値のあるやり方として、横にすべらせて全体を見せる形を挙げています。

Wikipedia「Breadcrumb navigation」、Jacob Gube「Breadcrumbs In Web Design: Examples And Best Practices」Smashing Magazine、2009年。どちらも、呼び名はヘンゼルとグレーテルがまいたパンくずから来ていると書いています。最初に名付けた人や文献は示していません。

Brüder Grimm「Hänsel und Gretel」『Kinder- und Haus-Märchen』初版、1812年（Wikisource の翻刻）、D. L. Ashliman 訳「Hansel and Gretel」。1回目は白い小石を落として帰り、2回目はパンを砕いて道にまいたものの、森の何千羽もの鳥がついばんでしまったと書かれています。初版と1857年の第7版のどちらも同じ流れです。

Mark Bernstein「Mark Bernstein（CV）」、Keith Instone「Breadcrumbs」（Wayback Machine の2004年の保存版）。Bernstein は、自分の作ったハイパーテキストの道具が、パンくずの考え方をハイパーテキストに持ち込んだと書いています。Instone は、ネットでの道案内に「bread crumb」という言葉が初めて文献で使われたのは、1987年の Bernstein だとしています。どちらも一次資料は示していません。

Harvey Jones, Daniel Rocha「New site hierarchies display in search results」Official Google Blog、2009年。一部の検索結果で URL の代わりにサイトの階層を出しはじめたと発表し、これはウェブで広く使われている「breadcrumbs」と呼ばれる道案内だと説明しています。

Google 検索セントラル「パンくずリスト（BreadcrumbList）のマークアップを追加する方法」。パンくずリストは、ページがサイトの階層のどこにあるかを示すとしています。

作者不明「Hänsel und Gretel. No 3.」Liebig's Extract of Meat Company の絵カード（シリーズ329、6枚組の3枚目）、1896年。パブリックドメイン（Public Domain Mark 1.0）。Wikimedia Commons。カードの下に「Brot streut Hans beim zweiten Gang」（2回目の道でハンスはパンをまく）と刷られています。