标签页用于在不同的页面或视图之间组织和切换内容。

一、概览（Overview）

1. 使用场景

用户应该能够通过辅助技术做到：

• 使用辅助技术执行某个操作，或导航到新的页面/目标位置
• 使用辅助技术，从当前未显示在视口中的标签页中选择一个操作或目标
• 当内容处于滚动状态时，仍然能方便地访问主要操作（primary actions）

2. 交互与样式

2.1 触控交互

当用户点按图标按钮时，会出现触控波纹效果，用来反馈这次交互操作。一旦点按生效，选中状态的指示条会激活，并移动到对应的标签位置上。

触控：点按

2.2 可滚动标签

当一组标签页无法在当前屏幕宽度内完全显示时，就会使用可滚动标签。它们尤其适合在触控界面中进行内容浏览。

在可滚动标签中，用户可以左右滑动整个标签组来切换标签；也可以通过方向键或 Tab 键在各个标签之间移动焦点。

不建议将标签组设置为“无限循环滚动”，否则可能会让依赖屏幕阅读器、以线性方式浏览内容的用户陷入“循环困境”而难以脱离。

要选中某一个具体标签，用户可以点按该标签，或者在焦点移动到该标签后按下空格键 / Enter 键。

横向滚动的标签页在无障碍上是可接受的：因为标签需要根据文本长度自适应加宽，而又不能打乱整体布局，此时通过横向滚动来查看全部标签与标签文字，是合理且必要的方式。

可滚动：可滚动标签页（Scrollable Tabs）

2.3 鼠标指针交互

当鼠标悬停在图标按钮上时，会显示悬停态，用视觉反馈提示用户：这是一个可点击的交互元素。

当用户点击按钮时（无论之前是选中还是未选中状态），都会出现波纹效果，同时选中指示条移动到对应标签位置，以此向用户反馈这次点击操作已生效。

鼠标指针：悬停、点击

2.4 键盘 / 开关输入

当通过 Tab 键移动焦点时，会出现焦点高亮指示，向用户明确提示：当前这个目标已被选中。

当用户在选中的标签上按下空格键或 Enter 键时（处于可激活状态），界面会跳转到该标签所对应的新页面或内容区域。

在标签菜单中，用户可以使用方向键或 Tab 键在各个菜单项之间移动焦点，使用空格键或 Enter 键选中某一项，也可以继续按 Tab 键离开当前激活的标签区域。

键盘 / 开关输入：Tab、空格 / Enter、方向键

不要默认启用高密度布局

不要在标签组件上默认应用高密度（压缩间距）样式——否则会让可点击区域小于推荐的 48×48 CSS 像素 最佳实践尺寸。

更好的做法是：提供一个由用户自行选择更高密度的方式，比如在设置中切换“紧凑型布局”或通过更改主题来启用高密度样式。

为了让用户在启用高密度设置后仍然能轻松改回去，用于切换密度的这些操作目标本身（比如开关、按钮）也应至少保持 48×48 CSS 像素 的可点击区域。

3. 初始焦点

当用户在标签菜单中使用方向键或 Tab 键移动焦点时，激活指示会先出现在第一个可交互元素上，用视觉反馈告诉用户：当前已经选中了这个元素。之后，用户可以继续使用 Tab 键在其他可交互元素之间依次移动，直到把当前标签菜单中所有可用项目都“走一遍”为止。

✅正确案例：使用方向键或 Tab 键在各个项目之间进行导航。

❌ 错误案例：不要用空格键或 Enter 键在标签之间导航；空格键和 Enter 键只应用来执行操作（例如选中当前标签）。

4. 键盘导航

5. 元素标注