ARIA: tablist 角色

描述

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

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

选项卡是一组分层的、已知为选项卡面板的内容区域，一次显示一个内容面板。每个选项卡面板都有一个关联的 tab 元素，激活该元素即可显示面板。选项卡元素的列表沿着当前显示面板的一个边缘排列，最常见的是顶部边缘，嵌套在 tablist 元素中。

tablist 中的每个 tab 都是一个 tabpanel 的标签，并且可以被激活以显示该面板。tablist 是包含一组 tab 元素的容器元素。

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

对于单选选项卡列表，非活动选项卡面板元素在用户选择与该选项卡面板关联的选项卡之前应隐藏起来。

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

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

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

为了键盘可访问性，必须管理此角色的后代元素的焦点。

具有 tablist 角色的元素具有隐含的 aria-orientation 值 horizontal（水平）。

关联的 WAI-ARIA 角色、状态和属性

tab 角色

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

aria-multiselectable

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

aria-orientation

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

键盘交互

对于选项卡列表

制表符

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

当焦点在选项卡列表内时，将焦点移至页面制表符序列中选项卡列表之外的下一个元素，即 tabpanel，除非 tabpanel 内部第一个包含有意义内容的元素是可聚焦的。

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

左箭头

将焦点移至上一个选项卡。如果焦点在上一个选项卡上，则将焦点移至最后一个选项卡。可选地，激活新聚焦的选项卡

右箭头

将焦点移至下一个选项卡。如果焦点在最后一个选项卡元素上，则将焦点移至第一个选项卡。可选地，激活新聚焦的选项卡

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

向上箭头

将焦点移至上一个选项卡。如果焦点在上一个选项卡上，则将焦点移至最后一个选项卡。可选地，激活新聚焦的选项卡

向下箭头

将焦点移至下一个选项卡。如果焦点在最后一个选项卡元素上，则将焦点移至第一个选项卡。可选地，激活新聚焦的选项卡

如果选项卡列表是水平的，它不响应 向下箭头 或 向上箭头，因此这些键即使在焦点在选项卡列表内时也能提供正常的浏览器滚动功能。

当焦点在具有水平或垂直方向的 tablist 的 tab 上时

空格键 或 回车键

如果选项卡未自动激活，则激活该选项卡。

Home（可选）

将焦点移至第一个选项卡。可选地，激活新聚焦的选项卡

End（可选）

将焦点移至最后一个选项卡。可选地，激活新聚焦的选项卡

Shift + F10

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

Delete（可选）

如果允许删除，则删除（关闭）当前选项卡元素及其关联的选项卡面板，将焦点设置在已关闭选项卡之后的下一个选项卡上，并可选地激活新聚焦的选项卡。如果已删除选项卡之后没有选项卡（例如，在从左到右的水平选项卡列表中，已删除的选项卡是最右边的选项卡），则将焦点设置在已删除选项卡之前的选项卡上，并可选地激活它。如果应用程序允许删除所有选项卡，并且用户删除了选项卡列表中剩余的最后一个选项卡，则应用程序会将焦点移至提供逻辑工作流程的另一个元素。作为 Delete 的替代方法，或作为 Delete 的补充，删除功能可在上下文菜单中找到。

示例

请参阅 tab 角色定义中的 tabpanel、tab 和 tablist 示例。

规范

另见

• tab 角色
• tabpanel 角色