理解 Accessible Components: Tabs 篇

Tabs 元件 (索引標籤) 的應用場景非常廣泛，在網頁導覽、設定介面和表單中都可以看到 Tabs 的出現。例如，在產品介紹頁中可能有關於該產品的介紹、規格、評價等；或是在應用程式的設定頁面中，也可以使用 Tabs 來組織不同的管理功能。

根據 APG Tabs Pattern 的定義，一個完整的 Tabs 介面必須包含以下的要素：

• Tabs：Tab list 和 Tab Panel 所形成的介面總稱。
• Tab List： 一個包含一組 Tab 的容器。
• Tab：使用者互動點擊的元素，用來觸發顯示對應的 Tab Panel。
• Tab Panel：包含與 Tab 對應的相關內容。

此外，Tabs 的重要特色之一，是當特定的 Tab 被選擇時，每次只會顯示「一個」 Tab Panel 的內容。

範例 (APG)

APG 指南提供了兩個不同的 Tabs Pattern 範例，一個是使用左右鍵切換 Tab 後會自動顯示 Tab Panel，另外一個則是在左右鍵切換後，還需要進一步按下 Enter 或 Space 鍵來手動開啟 Tab Panel 。至於為什麼需要分別指出這兩種案例，後面會再做說明：

• 自動顯示 Tab Panel 的 Tabs 範例：https://codepen.io/coseeing/embed/rNEywra?default-tab=html%2Cresult
• 手動開啟 Tab Panel 的 Tabs 範例：https://codepen.io/coseeing/embed/WNqpOKL?default-tab=html%2Cresult

重要的鍵盤操作

在 Tab List 上的鍵盤操作：

• Tab 鍵：當焦點移入 Tab List 中，焦點會停留在被選取 (active) 狀態的 Tab 上。在焦點順序上，Tab 的下一個可聚焦元素為對應的 Tab Panel 或是 Tab Panel 中的可聚焦元素，而非 Tab List 中下一個 Tab。 (如下圖所示)
• 左右鍵：當焦點在 Tab List 中時，使用左右鍵可以在不同的 Tab 上來回切換，如果焦點在 Tab List 中最右方的 Tab，再次按下右鍵會讓焦點循環至最左方的 Tab，反之亦然。
• 上下鍵：如果 Tab List 的方向是垂直的，則可以使用上下鍵來回切換不同 Tab。
  Space 或 Enter 鍵：如果 Tab 獲得焦點時不會自動開啟對應的 Tab Panel，使用 Space 或 Enter 鍵可以手動開啟 Tab Panel。
  Home 鍵 (非必要)：將焦點移至第一個 Tab。
  End 鍵 (非必要)：將焦點移至最後一個 Tab。

重要的 ARIA 屬性

由於目前並沒有原生的 Tabs 元素，因此在實作上我們必須使用 ARIA 屬性來確保語意的正確性。

• 作為一組 Tab 的容器 (container) 須具有 role=”tablist”。
• 每個 Tab 都須具有 role=”tab”，並包含在具有 role=”tablist” 的容器內。
• 每個 Tab Panel 都須具有 role=”tabpanel”。
• 每個 Tab Panel 都須具可訪問名稱，可使用 aria-label 或 aria-labelledby 屬性來實作。
• 每個 Tab 都須具有 aria-controls 屬性，該屬性指向其對應的 Tab Panel id。

如果 Tab List 方向是垂直的，它須具有 aria-orientation開啟新分頁 屬性，且值為 “vertical”。 反之，若為水平方向，值則為 “horizontal”。

重要的無障礙功能

• 確保在 Tabs 介面中，同時只有一個 Tab 可被聚焦，且鍵盤焦點順序為 Tab → 對應的 Tab Panel，使用者可以直接從 Tab 跳到內容區塊瀏覽，而不需要跳過好幾個 Tab 後才能看到內容。(想像一下如果今天有 10 個 Tab 就必須跳好多次！)
• 我們可以透過設定 tabindex 來達成這件事：當一些 Tab 沒有被選擇時，可在 Tab 上設定 tabindex=”-1"，這樣一來可以將這些 Tab 從鍵盤焦點順序中移除，使用者就無法直接透過鍵盤與沒被選擇的 Tab 互動。
• 為了讓螢幕閱讀器使用者可以輕鬆的瀏覽 Tab Panel 中的內容，當 Tab Panel 中沒有任何可聚焦元素時 (例如連結、按鈕)，需在 Tab Panel 上設定 tabindex=”0"，確保 Tab Panel 可被聚焦。

在一些複合元件中，例如 Tabs 或 Dropdown Select，焦點移動可能會使聚焦元素自動成為選取元素，叫做「選擇跟隨焦點 (having selection follow focus)」。這種作法多數時候會提高使用者體驗，但在某些情況下會對無障礙產生負面影響。

如果我們在 Tabs 中採取「選擇跟隨焦點」這種策略，則使用左右鍵移動焦點時 Tab Panel 會自動切換。如果 Tab Panel 裡的內容已存在於 DOM 中而不需要額外載入，切換 Tab 只是一瞬間的事。然而，如果顯示 Tab Panel 會須要花費較長的時間，例如透過網路請求取得資料，此時採取自動開啟的作法可能會嚴重影響使用者體驗。因為在這種情況下，每次的焦點移動都會導致延遲，這使得切換到順序較後面的 Tab 會變得耗時。

因此，在無法確保內容可以即時取得時，建議採取選擇「不」跟隨焦點的策略，讓使用者通過按 Enter 或 Space 的方式來改變選取的 Tab。

1. 標籤缺乏明確的焦點樣式開啟新分頁。
2. 無法單純透過鍵盤來操作 Tabs → 使用符合規範的套件或是依照 APG 指南實作鍵盤功能。
3. 沒有提示螢幕閱讀器目前選擇的 Tab 為何 → 被選擇的 Tab 應具有 aria-selected=”true” 屬性。
4. 沒有適當地關聯 Tab 與 Tab Panel → 每個 Tab 和 Tab Panel 都要有獨特的 id，並透過 aria-controls 屬性和 aria-labelledby 屬性關聯起來。
5. 缺乏適當的 ARIA roles → Tab 的容器應加上 role=”tablist”，Tab 本身加上 role=”tab”，而 Tab Panel 則是 role=”tabpanel”。

移動裝置適合用 Tabs 嗎？

因為同時需要顯示 Tab List 和 Tab Panel 內容，Tabs 比較常出現在寬螢幕介面上。而當 Tab 數量較多時，使用者可能需要透過滾動來選擇後面的 Tab。因此，在較小螢幕上，例如移動裝置，使用 Tabs 可能不太合適。為了提供更好的使用者體驗，可以改用 Accordion 方式來呈現資訊，這樣使用者可以更方便地展開和折疊內容。

Tab 可循環時應加上 Home/End 鍵的操作

當 Tab 數量很多，且又能循環切換 Tab 時 (在最後一個 Tab 按右鍵能跳到最左邊的第一個 Tab)，應該在 Tabs 中加入 Home 和 End 鍵的切換功能。使用 Home 鍵可以快速跳到第一個 Tab，而使用 End 鍵則可以快速跳到最後一個 Tab。這對於需要在大量 Tabs 之間快速切換，且無法依賴視覺的使用者來說，會大大提高定位與操作效率，而在不可循環切換 Tab 時，由於可以透過長按左右方向鍵快速跳到第一個與最後一個 Tab ，此時 Home 鍵與 End 鍵的切換功能就不那麼必要。

推薦使用

Radix UI開啟新分頁、Headless UI開啟新分頁、React ARIA開啟新分頁、Bootstrap開啟新分頁 這幾個元件庫的 Tabs 元件皆符合 APG 無障礙指南：

• 提供完整的語意，包含 roles、aria-selected、aria-controls 等屬性。
• 可以使用鍵盤左右鍵來回在不同 Tab 切換，若為垂直頁籤，則可以使用上下鍵。
• Tab Panel 可被聚焦。
• Radix UI、Headless UI、React ARIA 有提供參數來控制 Tab Panel 是否自動開啟。
• Radix UI 和 Headless UI 有支援 Home 鍵與 End 鍵操作，可快速跳到第一或最後一個 Tab。

Radix UI Tabs Codesandbox: https://codesandbox.io/p/devbox/elastic-noyce-ffkzsw

其實大部分的知名套件都有提供完整的語意，不過在一些小地方仍可以優化的更好：

• Ant Design開啟新分頁：無法使用鍵盤左右鍵來切換 Tab，焦點順序不符合指南。
• MUI開啟新分頁：Tab Panel 無法被聚焦。
• Element Plus開啟新分頁：Tab Panel 無法被聚焦。

各套件 Tabs 元件的無障礙比較表

• Tabs pattern overview — ARIA APG開啟新分頁
• Developing a Keyboard Interface — ARIA APG開啟新分頁
• How to Make Accessible Tabs開啟新分頁
• Tabbed Interfaces — Inclusive Components開啟新分頁
• Native HTML Tabs開啟新分頁
• Responsive & accessible tabbed interfaces開啟新分頁