新規作成日 2017-01-18
最終更新日
原文:Breadcrumb
ナビゲーション階層内の現在のページの位置を指定し、CSSを介してセパレータを自動的に追加します。
概要
セパレーターは、::beforeと内容を通してCSSで自動的に追加されています。
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
アクセスしやすさ
パンくずリストが、ナビゲーションを提供するので、意味のあるラベルを追加することをお勧めします。<nav>要素で提供されるナビゲーションの種類を説明するaria-label="breadcrumb"のような、同様に、現在のページを表現することを示すために、設定の最後の項目に、aria-current="page"を適用します。
詳細については、WAI-Ariaのパンくずリストのパターンのための編集するための練習を参照して下さい。