ARIA：tablist 角色

您可能在阅读本文时正在与选项卡界面交互！浏览器选项卡允许用户在一个窗口中打开多个网页。点击浏览器窗口顶部 tablist 中的选项卡，使用户能够一次在一个站点中显示主要内容区域（tabpanel）中的关联内容。这称为“选项卡设计模式”。

在实现选项卡设计模式时，将使用tab、tablist 和tabpanel 角色。

选项卡是一组分层的内容部分，称为选项卡面板，一次显示一个内容面板。每个选项卡面板都关联着一个 tab 元素，激活该元素时，会显示该面板。选项卡元素列表排列在当前显示的面板的一侧，最常见的是顶部边缘，嵌套在一个 tablist 元素中。

tablist 中的每个 tab 充当一个 tabpanel 的标签，并且可以被激活以显示该面板。tablist 是包含所包含选项卡元素集的容器元素。

初始化选项卡界面时，将显示一个选项卡面板，并且其关联的选项卡将以样式化方式指示其处于活动状态。当用户激活其他选项卡元素之一时，先前显示的选项卡面板将隐藏，与激活的选项卡关联的选项卡面板将变为可见，并且该选项卡将被视为“活动”。

对于单选 tablist，非活动 tabpanel 元素应对用户隐藏，直到用户选择与该 tabpanel 关联的选项卡。

创建多选 tablist 时，请在 tablist 元素 上包含aria-multiselectable="true"。

tab 元素（而不是 tablist）具有aria-selected 属性。对于与每个可见 tabpanel 关联的选项卡，将其设置为 aria-selected="true"。与隐藏 tabpanel 元素关联的选项卡的 aria-selected 属性设置为 false。

如果选项卡列表具有可见标签，请将aria-labelledby 设置为标签元素的 id。否则，请使用aria-label 提供标签。

要实现键盘可访问性，必须管理此角色的后代的焦点。

具有 tablist 角色的元素的隐式aria-orientation 值为 horizontal。

tab 角色

必需的拥有元素。每个 tablist 必须具有一个或多个 tab 子元素。

aria-multiselectable

设置为 true 时，表示用户可以从 tablist 后代中选择多个 tab。

aria-orientation

如果 tablist 元素是垂直方向的，请设置 aria-orientation="vertical"。默认值为 horizontal。

对于选项卡列表

Tab

当焦点移入选项卡列表时，将焦点置于活动 tab 元素上。

当选项卡列表包含焦点时，将焦点移动到选项卡列表外部的页面选项卡序列中的下一个元素，除非 tabpanel 内第一个包含有意义内容的元素可聚焦，否则该元素为 tabpanel。

当焦点位于水平选项卡列表中的选项卡元素上时

左箭头

将焦点移动到上一个选项卡。如果焦点位于第一个选项卡上，则将焦点移动到最后一个选项卡。或者，激活新获得焦点的选项卡

右箭头

将焦点移动到下一个选项卡。如果焦点位于最后一个选项卡元素上，则将焦点移动到第一个选项卡。或者，激活新获得焦点的选项卡

当焦点位于垂直选项卡列表中的选项卡元素上时

上箭头

将焦点移动到上一个选项卡。如果焦点位于第一个选项卡上，则将焦点移动到最后一个选项卡。或者，激活新获得焦点的选项卡

下箭头

将焦点移动到下一个选项卡。如果焦点位于最后一个选项卡元素上，则将焦点移动到第一个选项卡。或者，激活新获得焦点的选项卡

如果选项卡列表是水平方向的，则它不会侦听 下箭头 或 上箭头，因此即使焦点位于选项卡列表内，这些键也可以提供其正常的浏览器滚动功能。

当焦点位于水平或垂直方向的 tablist 中的选项卡上时

空格 或 Enter

如果选项卡未在获得焦点时自动激活，则激活该选项卡。

Home（可选）

将焦点移动到第一个选项卡。或者，激活新获得焦点的选项卡

End（可选）

将焦点移动到最后一个选项卡。或者，激活新获得焦点的选项卡

Shift + F10

如果选项卡具有关联的弹出菜单，则打开该菜单。

Delete（可选）

如果允许删除，则删除（关闭）当前的选项卡元素及其关联的选项卡面板，将焦点设置到已关闭选项卡后面的选项卡上，并可以选择激活新获得焦点的选项卡。如果没有选项卡位于已删除选项卡的后面（例如，已删除选项卡是左右水平选项卡列表中最右侧的选项卡），则将焦点设置到已删除选项卡之前的选项卡上，并可以选择激活该选项卡。如果应用程序允许删除所有选项卡，并且用户删除了选项卡列表中最后一个剩余的选项卡，则应用程序会将焦点移动到提供逻辑工作流的另一个元素上。作为“删除”的替代方案，或除了支持“删除”之外，删除功能还可以在上下文菜单中使用。

请参阅tabpanel、tab和tablist示例，该示例位于tab角色定义中。

• tab 角色
• tabpanel 角色