Tabs
Demo 與 Accessibility Tree
帳號設定
這個面板裡有一個連結，所以面板不再多佔一個停留點。
Accessibility Tree
觀察對象：外層的分頁列。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：目前作用中的分頁。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：目前顯示中的面板。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 移入分頁列，焦點落在作用中的那一個。再按一次移到面板本身或面板內的第一個可聚焦元素。 |
| ← / → | 切換分頁並立即顯示對應面板，走到兩端會循環。 |
| Home / End | 跳到第一個與最後一個分頁。 |
| ↑ / ↓ | 水平分頁列刻意不攔截，維持瀏覽器原本的捲動行為。垂直分頁列才由上下鍵負責切換。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | tablist | 包住所有分頁的容器。 |
aria-labelledby | 可見標題的 id | 分頁列的名稱。有可見標題就指向它；沒有才退而用 aria-label。這樣看到的字和聽到的字是同一份，不會各說各話。 |
role | tab | 每個分頁，必須直接位於 tablist 內。 |
aria-selected | true / false | 作用中的那一個為 true，其餘全部明寫 false —— 不是省略。省略的話輔助科技無法分辨「沒被選取」與「這個元件不支援選取」。 |
aria-controls | 面板的 id | 把分頁與它控制的面板關聯起來。 |
role | tabpanel | 每個內容面板。同一時間只有作用中的那一個不帶 hidden。 |
aria-labelledby | 對應分頁的 id | 面板的名稱來自它的分頁。使用者從面板列表跳過來時，聽到的是「總覽，分頁面板」而不是一個無名的區塊。 |
tabindex | 0 / 省略 | 只在面板內沒有可聚焦元素時給 0 —— 那種面板鍵盤使用者根本到不了。內容本身就可聚焦時再給，只會多一個沒有意義的停留點。這個元件會自己判斷。 |
tabindex | -1 | 沒被選取的分頁。整組只留一個停留點，這就是 roving tabindex：Tab 進得來，內部改由方向鍵負責。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
分頁與面板的對應關係以 aria-controls 與 aria-labelledby 雙向表達，不是只靠視覺上的相鄰。
- 等級 A2.1.1 鍵盤
方向鍵、Home、End 即可完成全部操作。
- 等級 A2.4.3 焦點順序
分頁列整組一個停留點，接著是面板 —— 順序與視覺順序一致。
- 等級 AA2.4.7 焦點可見
分頁與可聚焦的面板都有橘色 focus ring。
- 等級 A4.1.2 名稱、角色、值
tablist、tab、tabpanel 三個角色齊備，各自具名，選取狀態以 aria-selected 表達。
APG 規則
- 元件語意
Tab 容器須具備頁籤列的功能識別
包含所有 Tab 的容器須設定 role=tablist。
- 元件語意
Tablist 須具備無障礙名稱
當有可見標籤時，Tablist 須透過 aria-labelledby 提供無障礙名稱；否則使用 aria-label 提供無障礙名稱。
- 元件語意
每個 Tab 須位於 Tablist 內且具備 Tab 的角色語意
每個 Tab 元素須設定 role=tab，且須包含在 role=tablist 中。
- 元件語意
每個 Tab 對應的內容區域須具備 tabpanle 的角色語意
與 Tab 關聯的每個內容面板須設定 role=tabpanel。
- 元件語意
目前啟用的 Tab aria-selected 狀態須正確設定
作用中的 Tab 須設定 aria-selected=true，其餘所有 Tab 須設定 aria-selected=false。
- 元件語意
Tabpanel 的無障礙名稱須由對應的 Tab 提供
每個 Tabpanel 須透過 aria-labelledby 參照其關聯的 Tab 。
- 動態內容
切換 Tab 時須顯示對應面板並隱藏前一個面板
Tab 初始化時，只顯示作用中 Tab 的 Panel。當另一個 Tab 被啟動時，其關聯的 Tabpanel 變為可見，之前顯示的 Tabpanel 則被隱藏。
- 焦點管理
鍵盤焦點進入 Tablist 時應聚焦於目前啟用的 Tab
當焦點以 Tab 鍵移入 Tablist 時，焦點落在目前作用中的 Tab 上。
- 焦點管理
Tab 鍵離開 Tablist 時應移至對應的內容面板
當 Tablist 有焦點時，再按 Tab 鍵移至關聯的 Tabpanel；若 Tabpanel 的第一個有意義的內容可獲得焦點，則焦點移至該元素。
- 鍵盤操作
水平 Tab 列支援向左鍵與向右鍵循環切換焦點
在水平 Tablist 中，左方向鍵移至前一個 Tab，右方向鍵移至下一個 Tab，且導覽到兩端時會循環。
- 鍵盤操作
垂直 Tab 支援向上鍵與向下鍵循環切換焦點
在設有 aria-orientation=vertical 的 Tablist 中，下方向鍵的功能等同水平 Tablist 的右方向鍵，上方向鍵等同左方向鍵。
- 鍵盤操作
手動模式的 Tab 可用 Enter 鍵或 Space 鍵啟用
若 Tab 不在獲得焦點時自動啟動，則按 Enter 或 Space 可啟動焦點所在的 Tab 並顯示其 Panel。
- 鍵盤操作選做
Home 鍵與 End 鍵可分別移至第一個與最後一個頁籤
Home 鍵將焦點移至第一個 Tab，End 鍵將焦點移至最後一個 Tab。
- 焦點管理
內容無可聚焦元素的 Tabpanel 仍可納入頁面 Tab 鍵順序
若 Tabpanel 沒有可聚焦的元素，且其第一個有意義的內容也不可聚焦，則 Tabpanel 須設定 tabindex=0。
- 鍵盤操作
水平 Tablist 不攔截向上鍵與向下鍵，以保留捲動功能
焦點位於水平 Tablist 時，按向上鍵與向下鍵應維持瀏覽器原有的頁面捲動功能，不可被 Tab 元件攔截。
- 焦點管理選做
可刪除的 Tab 後焦點應移至合理的相鄰位置
按 Delete 鍵關閉目前 Tab 及其 Panel，並將焦點移至相鄰的 Tab；若刪除的是最後一個 Tab，則焦點移至工作流程中合理的元素。
- 鍵盤操作選做
若不支援 Delete 鍵刪除，可透過右鍵選單執行刪除 Tab
若支援刪除 Tab 但不使用 Delete 鍵，刪除功能須可透過 Tab 的快捷選單執行。
- 焦點管理選做
自動啟用模式的 Tab 切換不應有明顯延遲
若 Tab 在獲得焦點時自動啟動，其關聯 Panel 須立即顯示，無明顯延遲；否則應改用手動啟動模式。