ARIA: tablist 角色

描述

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

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

選項卡是一組分層的、已知為選項卡面板的內容區域，一次顯示一個內容面板。每個選項卡面板都有一個關聯的 tab 元素，啟用該元素即可顯示面板。選項卡元素的列表沿著當前顯示面板的一個邊緣排列，最常見的是頂部邊緣，巢狀在 tablist 元素中。

tablist 中的每個 tab 都是一個 tabpanel 的標籤，並且可以被啟用以顯示該面板。tablist 是包含一組 tab 元素的容器元素。

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

對於單選選項卡列表，非活動選項卡面板元素在使用者選擇與該選項卡面板關聯的選項卡之前應隱藏起來。

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

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

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

為了鍵盤可訪問性，必須管理此角色的後代元素的焦點。

具有 tablist 角色的元素具有隱含的 aria-orientation 值 horizontal（水平）。

關聯的 WAI-ARIA 角色、狀態和屬性

tab 角色

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

aria-multiselectable

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

aria-orientation

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

鍵盤互動

對於選項卡列表

製表符

當焦點移入選項卡列表時，將焦點設定在活動的 tab 元素上。

當焦點在選項卡列表內時，將焦點移至頁面製表符序列中選項卡列表之外的下一個元素，即 tabpanel，除非 tabpanel 內部第一個包含有意義內容的元素是可聚焦的。

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

左箭頭

將焦點移至上一個選項卡。如果焦點在上一個選項卡上，則將焦點移至最後一個選項卡。可選地，啟用新聚焦的選項卡

右箭頭

將焦點移至下一個選項卡。如果焦點在最後一個選項卡元素上，則將焦點移至第一個選項卡。可選地，啟用新聚焦的選項卡

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

向上箭頭

將焦點移至上一個選項卡。如果焦點在上一個選項卡上，則將焦點移至最後一個選項卡。可選地，啟用新聚焦的選項卡

向下箭頭

將焦點移至下一個選項卡。如果焦點在最後一個選項卡元素上，則將焦點移至第一個選項卡。可選地，啟用新聚焦的選項卡

如果選項卡列表是水平的，它不響應 向下箭頭 或 向上箭頭，因此這些鍵即使在焦點在選項卡列表內時也能提供正常的瀏覽器滾動功能。

當焦點在具有水平或垂直方向的 tablist 的 tab 上時

空格鍵 或 回車鍵

如果選項卡未自動啟用，則啟用該選項卡。

Home（可選）

將焦點移至第一個選項卡。可選地，啟用新聚焦的選項卡

End（可選）

將焦點移至最後一個選項卡。可選地，啟用新聚焦的選項卡

Shift + F10

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

Delete（可選）

如果允許刪除，則刪除（關閉）當前選項卡元素及其關聯的選項卡面板，將焦點設定在已關閉選項卡之後的下一個選項卡上，並可選地啟用新聚焦的選項卡。如果已刪除選項卡之後沒有選項卡（例如，在從左到右的水平選項卡列表中，已刪除的選項卡是最右邊的選項卡），則將焦點設定在已刪除選項卡之前的選項卡上，並可選地啟用它。如果應用程式允許刪除所有選項卡，並且使用者刪除了選項卡列表中剩餘的最後一個選項卡，則應用程式會將焦點移至提供邏輯工作流程的另一個元素。作為 Delete 的替代方法，或作為 Delete 的補充，刪除功能可在上下文選單中找到。

示例

請參閱 tab 角色定義中的 tabpanel、tab 和 tablist 示例。

規範

另見

• tab 角色
• tabpanel 角色