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