Breadcrumb
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：外層的導覽地標。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：路徑本身的清單。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：代表目前頁面的那個連結。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 依序移到每一層的連結。目前頁面若不是連結則會被跳過。 |
| Enter | 前往該層。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
（結構） | <nav> | Breadcrumb 必須放在導覽地標內，使用者才能從地標清單直接跳進來。用 <nav> 即隱含 navigation 角色。 |
aria-label | 麵包屑 | 導覽地標必須有名稱。一個頁面通常有主導覽、頁尾導覽、麵包屑數個 nav，沒有名稱在地標清單裡就是好幾個「導覽」，分不出誰是誰。 |
aria-current | page | 標示代表目前頁面的那個連結。若目前頁面不做成連結，可以省略 —— 不能點本身已經說明它就是當下所在。 |
aria-hidden | true | 層級之間的斜線是純視覺，唸出來只會干擾。 |
（結構） | <ol> | 層級是有先後的，用有序清單而非 <ul>，順序資訊才進得了無障礙樹。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
以 nav 地標與有序清單表達「這是一組有先後的路徑」，而不是只靠視覺上的斜線。
- 等級 AA2.4.6 標題與標籤
導覽地標的名稱要能說明它是什麼，讓地標清單裡的每一項都可辨識。
- 等級 AAA2.4.8 所在位置
Breadcrumb 本身就是在回答「我在網站的哪裡」，aria-current 讓這個答案也進到無障礙樹。
- 等級 A4.1.2 名稱、角色、值
導覽地標具備名稱，目前頁面以 aria-current=page 表達狀態。
APG 規則
- 頁面結構
Breadcrumb 導覽須位於導覽地標內
Breadcrumb 置於導覽地標內
- 頁面結構
Breadcrumb 導覽地標須具備無障礙名稱
Breadcrumb 導覽地標須透過 aria-label 或 aria-labelledby 提供無障礙名稱
- 導覽機制
Breadcrumb 的目前頁面鏈結須正確設定成 aria-current
代表目前頁面的連結應設定 aria-current="page"；若代表目前頁面的元素不是連結，則 aria-current 可省略。