ARIA：tabpanel 角色

tabpanel 角色表示元素是與tab 角色關聯的資源的容器，其中每個tab 都包含在tablist 中。

tabpanel 是選項卡介面的一部分，選項卡介面是一種常見的使用者體驗模式，其中一組視覺選項卡允許快速切換多個分層檢視。每個選項卡都使用tab 角色進行定義，這些選項卡都包含在具有tablist 角色的元素中。tablist 通常在內容區域的上方或側面以視覺方式放置，其中包含關聯的 tabpanel。tabpanel 是每個內容窗格容器的角色，該內容窗格與選項卡介面tablist 中對應的tab 相關聯。

在許多選項卡介面中，一次只能看到一個tabpanel。但是，某些介面可能需要同時顯示多個選項卡面板。在這些情況下，將為tablist 提供aria-multiselectable 屬性，然後tab 元素將使用aria-expanded 屬性指示其關聯的tabpanel 是否可見。選項卡的選擇狀態將用於指示哪個選項卡面板是當前“活動”面板。例如，這可以指示如果有人在多選tablist 中的選項卡上按下tab 鍵時，鍵盤焦點將移動到哪個選項卡面板。

在單選選項卡介面中，僅顯示與當前選定選項卡關聯的tabpanel。與未選定選項卡關聯的所有其他tabpanel 元素都必須對使用者隱藏。因此，當選項卡選擇更改時，顯示的選項卡面板也會更改，而先前顯示的選項卡面板將被隱藏。

在多選選項卡介面中，可以顯示多個tabpanel 元素，這與它們關聯的tab 元素的展開狀態相匹配。

選項卡不會充當指向各個面板的錨鏈接 - 並且啟用後，鍵盤焦點應保留在當前tab 元素上，而不是自動移動到新顯示的tabpanel。雖然可以基於指向其關聯內容部分的頁面內超連結的基本標記模式逐步增強選項卡介面，但當使用 JavaScript 將這些元素修改為選項卡式介面時，應阻止超連結的預設行為。理想情況下，可以透過刪除或修改href 屬性來實現此目的，因為這將具有從元素的瀏覽器上下文選單中刪除超連結特定選單項的額外好處。

當鍵盤焦點位於tablist 或tablist 中的tab 上時，應將Tab 鍵程式設計為從聚焦的選項卡（可能是也可能不是選定的選項卡）移動到表示當前選定選項卡的tabpanel。

tablist 中的每個tab 都可以作為其對應tabpanel 的標籤。將每個tab 的id 作為每個tabpanel 的aria-labelledby 屬性的值。

您還可以選擇性地將每個tabpanel 與其關聯的tab 關聯，方法是將tabpanel 的id 作為tab 的aria-controls 屬性的值。

初始化選項卡式介面時，將顯示一個tabpanel，並將其關聯的tab 設定為樣式以指示其處於活動狀態，從而反映其程式設計狀態。所有非活動tabpanel 元素都必須對所有使用者隱藏。這最常透過使用 CSS 的display: none 來實現。

有關此角色使用的更多資訊，請參閱ARIA tab 角色 文章。

包含tabindex="-1" 以允許tabpanel 接收焦點，而無需將tabpanel 包含在頁面的鍵盤焦點順序中。

確保為tabpanel 定義接收焦點時的樣式，最理想的是使用 CSS 的:focus 偽類，以便鍵盤使用者知道焦點已更改並瞭解當前哪個內容具有焦點。

可以使用此選項卡模式建立輪播：幻燈片選擇器控制元件可以標記為tablist 中的tabs，幻燈片由tabpanel 元素表示。

tab 角色

控制關聯tabpanel 的可見性

tablist 角色

tab 元素組。

aria-labelledby

提供可訪問的名稱。引用控制面板的tab 元素

aria-expanded

如果使用多選tablist，則應在必要的tab元素上使用。

請參閱tablist鍵盤互動，該互動在tablist角色定義中。

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

• ARIA tab角色
• ARIA tablist角色
• 示例：帶自動啟用的選項卡 - W3C
• 示例：帶手動啟用的選項卡 -W3C