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