導覽標記 (Breadcrumb)
- 新提案
- →
- 封閉測試
- →
- 公開測試
- →
- 已穩定
成熟度說明
- 新提案：未完成開發、請勿使用。
- 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
- 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
- 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。
說明
- 導覽標記（Breadcrumb，亦稱麵包屑）導航幫助使用者理解網站的多個層級並可在其之間移動，也有顯示使用者在目前網站中位置的作用。
- 導覽標記元件不適合套用在扁平結構的網站，因扁平結構的網站沒有上、下層的關聯，無法提供有效的路徑指引，對使用者來說沒有太大意義，反而可能讓使他們感到困惑。
斜線分隔
HTML
<nav aria-label="導覽標記" class="breadcrumb">
<ol>
<li>
<a href="/">首頁</a>
</li>
<li>
<a href="/components/index.html">共用元件</a>
</li>
<li>
<a href="" aria-current="page">導覽標記 (Breadcrumb)</a>
</li>
</ol>
</nav>箭頭分隔
HTML
<nav aria-label="導覽標記" class="breadcrumb arrow-separator">
<ol>
<li>
<a href="/">首頁</a>
</li>
<li>
<a href="/components/index.html">共用元件</a>
</li>
<li>
<a href="" aria-current="page">導覽標記 (Breadcrumb)</a>
</li>
</ol>
</nav>CSS
.arrow-separator：頁面的分隔改用 V 型符號表示，預設為斜線。
親和力
- 使用 nav 元素，讓導覽標記成為頁面地標架構，進而可以被更簡單的被定位。
- 使用 aria-label 屬性，填寫的「文字內容」作為導覽標記的標題，在瀏覽器中是不可見的，但螢幕報讀軟體（又稱為螢幕閱讀器）會朗讀。
- 針對目前所在連結（通常是導覽標記的最後一個項目），要加上 aria-current 屬性作為標示，值是 page，若當前所在位置只是「文字」，並非超連結的話，則此屬性為選擇性。
- 將僅作為視覺上的分隔用途的斜線或箭頭符號，用 CSS 方式渲染，以避免螢幕報讀軟體朗讀出來。