选项卡模式：tablist、tab、tabpanel

tab set 一次显示一个面板，并允许用户在面板之间切换。对于辅助技术来说，它必须看起来是一个完整的组件，而不是一些零散的链接。

这个模式依赖三个 ARIA 角色：包含各个选项卡的 tablist、每个选项卡，以及每个选项卡所显示的面板。三者都要设置正确。

将选项卡所在的一行包裹在带有 role="tablist" 的元素中。这会告诉屏幕阅读器，其中的子元素是一组相关的选项卡。

使用真正的 button 并设置 role="tab" 来构建每个选项卡。按钮天然可聚焦、可点击，因此无需额外连接操作。

每个选项卡显示的内容都应设置 role="tabpanel"。这表示它是当前选中选项卡所控制的区域。

在活动选项卡上设置 aria-selected="true"，其余选项卡设置为 false。屏幕阅读器会读出当前选中了哪个选项卡。

使用 aria-controls 将每个选项卡指向其面板，并将值设置为面板的 id。用户就能了解该选项卡会打开哪个区域。

为面板设置 aria-labelledby，使其指向对应的选项卡。这样，面板就会使用选项卡文本作为自己的可访问名称。

同一时间只应显示一个面板。在未选中选项卡对应的面板上添加 hidden 属性，使它们离开页面。

tablist 应具有描述其用途的 aria-label，例如 Account settings。用户可以听到整组选项卡的用途。

组合起来后，屏幕阅读器会读出类似 Profile, tab, selected, 1 of 3 的内容。这种定位信息正是选项卡易用的关键。

您已经学会 tablist, tab, tabpanel 三者组成的模式。标记选中的选项卡，将每个选项卡链接到对应面板，并隐藏未激活的面板。