ARIA：tablist 角色

您可能在閱讀本文時正在與選項卡介面互動！瀏覽器選項卡允許使用者在一個視窗中開啟多個網頁。點選瀏覽器視窗頂部 tablist 中的選項卡，使使用者能夠一次在一個站點中顯示主要內容區域（tabpanel）中的關聯內容。這稱為“選項卡設計模式”。

在實現選項卡設計模式時，將使用tab、tablist 和tabpanel 角色。

選項卡是一組分層的內容部分，稱為選項卡面板，一次顯示一個內容面板。每個選項卡面板都關聯著一個 tab 元素，啟用該元素時，會顯示該面板。選項卡元素列表排列在當前顯示的面板的一側，最常見的是頂部邊緣，巢狀在一個 tablist 元素中。

tablist 中的每個 tab 充當一個 tabpanel 的標籤，並且可以被啟用以顯示該面板。tablist 是包含所包含選項卡元素集的容器元素。

初始化選項卡介面時，將顯示一個選項卡面板，並且其關聯的選項卡將以樣式化方式指示其處於活動狀態。當用戶啟用其他選項卡元素之一時，先前顯示的選項卡面板將隱藏，與啟用的選項卡關聯的選項卡面板將變為可見，並且該選項卡將被視為“活動”。

對於單選 tablist，非活動 tabpanel 元素應對使用者隱藏，直到使用者選擇與該 tabpanel 關聯的選項卡。

建立多選 tablist 時，請在 tablist 元素 上包含aria-multiselectable="true"。

tab 元素（而不是 tablist）具有aria-selected 屬性。對於與每個可見 tabpanel 關聯的選項卡，將其設定為 aria-selected="true"。與隱藏 tabpanel 元素關聯的選項卡的 aria-selected 屬性設定為 false。

如果選項卡列表具有可見標籤，請將aria-labelledby 設定為標籤元素的 id。否則，請使用aria-label 提供標籤。

要實現鍵盤可訪問性，必須管理此角色的後代的焦點。

具有 tablist 角色的元素的隱式aria-orientation 值為 horizontal。

tab 角色

必需的擁有元素。每個 tablist 必須具有一個或多個 tab 子元素。

aria-multiselectable

設定為 true 時，表示使用者可以從 tablist 後代中選擇多個 tab。

aria-orientation

如果 tablist 元素是垂直方向的，請設定 aria-orientation="vertical"。預設值為 horizontal。

對於選項卡列表

Tab

當焦點移入選項卡列表時，將焦點置於活動 tab 元素上。

當選項卡列表包含焦點時，將焦點移動到選項卡列表外部的頁面選項卡序列中的下一個元素，除非 tabpanel 內第一個包含有意義內容的元素可聚焦，否則該元素為 tabpanel。

當焦點位於水平選項卡列表中的選項卡元素上時

左箭頭

將焦點移動到上一個選項卡。如果焦點位於第一個選項卡上，則將焦點移動到最後一個選項卡。或者，啟用新獲得焦點的選項卡

右箭頭

將焦點移動到下一個選項卡。如果焦點位於最後一個選項卡元素上，則將焦點移動到第一個選項卡。或者，啟用新獲得焦點的選項卡

當焦點位於垂直選項卡列表中的選項卡元素上時

上箭頭

將焦點移動到上一個選項卡。如果焦點位於第一個選項卡上，則將焦點移動到最後一個選項卡。或者，啟用新獲得焦點的選項卡

下箭頭

將焦點移動到下一個選項卡。如果焦點位於最後一個選項卡元素上，則將焦點移動到第一個選項卡。或者，啟用新獲得焦點的選項卡

如果選項卡列表是水平方向的，則它不會偵聽 下箭頭 或 上箭頭，因此即使焦點位於選項卡列表內，這些鍵也可以提供其正常的瀏覽器滾動功能。

當焦點位於水平或垂直方向的 tablist 中的選項卡上時

空格 或 Enter

如果選項卡未在獲得焦點時自動啟用，則啟用該選項卡。

Home（可選）

將焦點移動到第一個選項卡。或者，啟用新獲得焦點的選項卡

End（可選）

將焦點移動到最後一個選項卡。或者，啟用新獲得焦點的選項卡

Shift + F10

如果選項卡具有關聯的彈出選單，則開啟該選單。

Delete（可選）

如果允許刪除，則刪除（關閉）當前的選項卡元素及其關聯的選項卡面板，將焦點設定到已關閉選項卡後面的選項卡上，並可以選擇啟用新獲得焦點的選項卡。如果沒有選項卡位於已刪除選項卡的後面（例如，已刪除選項卡是左右水平選項卡列表中最右側的選項卡），則將焦點設定到已刪除選項卡之前的選項卡上，並可以選擇啟用該選項卡。如果應用程式允許刪除所有選項卡，並且使用者刪除了選項卡列表中最後一個剩餘的選項卡，則應用程式會將焦點移動到提供邏輯工作流的另一個元素上。作為“刪除”的替代方案，或除了支援“刪除”之外，刪除功能還可以在上下文選單中使用。

請參閱tabpanel、tab和tablist示例，該示例位於tab角色定義中。

• tab 角色
• tabpanel 角色