ARIA：tabpanel 角色

描述

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

tabpanel 是標籤頁介面的一部分，這是一種常見的使用者體驗模式，其中一組視覺化的標籤頁允許在多個分層檢視之間快速切換。每個標籤頁都透過 tab 角色定義，這些標籤頁包含在一個具有 tablist 角色的元素中。tablist 通常在視覺上定位在內容區域的上方或旁邊，包含相關的 tabpanel。tabpanel 是標籤頁介面的 tablist 中與相應 tab 關聯的每個內容窗格的容器的角色。

在許多標籤頁介面中，一次只會顯示一個 tabpanel。然而，有些介面可能需要同時顯示多個標籤頁面板。在這些情況下，tablist 會提供 aria-multiselectable 屬性，然後 tab 元素會使用 aria-expanded 屬性來指示其關聯的 tabpanel 是否可見。標籤頁的選中狀態將用於指示哪個 tabpanel 是當前“活動”的面板。例如，這可以指示當用戶在多選 tablist 中的標籤頁上按下 Tab 鍵時，鍵盤焦點將移至哪個 tabpanel。

在單選標籤頁介面中，只顯示與當前選定標籤頁關聯的 tabpanel。所有與未選中標籤頁關聯的其他 tabpanel 元素必須對使用者隱藏。因此，當標籤頁選擇發生變化時，顯示的 tabpanel 也會發生變化，而之前顯示的 tabpanel 將被隱藏。

在多選標籤頁介面中，可以顯示多個 tabpanel 元素，這與其關聯的 tab 元素的展開狀態相匹配。

標籤頁不充當指向各個面板的錨點連結——啟用後，鍵盤焦點應保留在當前 tab 元素上，而不是自動移至新顯示的 tabpanel。雖然標籤頁介面可以基於頁面內指向其關聯內容部分的超連結的底層標記模式進行漸進式增強，但當使用 JavaScript 將這些元素修改為標籤頁介面時，應阻止超連結的預設行為。理想情況下，可以透過刪除或修改 href 屬性來完成此操作，這樣還可以移除元素瀏覽器上下文選單中的超連結特定選單項。

當鍵盤焦點位於 tablist 或 tablist 中的 tab 上時，應將 Tab 鍵程式設計為從焦點所在的標籤頁（可能是選中的標籤頁，也可能不是）移動到代表當前選中標籤頁的 tabpanel。

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

您還可以透過將 tabpanel 的 id 作為 tab 的 aria-controls 屬性的值包含進去，來選擇性地將每個 tabpanel 與其關聯的 tab 相關聯。

當初始化標籤頁介面時，會顯示一個 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