tab

适用场景

用于水平或垂直排列的标签条中的单个标签页。tab 必须是 role="tablist" 元素的直接子元素（或通过 aria-owns 归属）。每个 tab 必须通过 aria-controls="<tabpanel-id>" 指向其关联的面板。面板上的 aria-labelledby 则反向指回该 tab，形成互指关系。

标签页是一种应用程序模式。如果所谓的”标签页”实际上只是在不同页面之间导航，应改用带 <a> 链接的 <nav> 元素——URL 的变化使标签页模式不再适用。

tab 本身通常使用 <button> 元素实现。按钮语义与 role="tab" 能够完美结合，焦点管理和激活处理也随之自动生效。

键盘与焦点规范

依据 APG 标签页模式：

• Tab 键将焦点移入 tablist，定位到当前激活的标签页；再次按 Tab 键将焦点移出（通常移入 tabpanel，前提是其设有 tabindex="0"）。
• 左右方向键（垂直 tablist 则为上下方向键）在各标签页之间移动焦点。
• Home / End 键跳转至第一个或最后一个标签页。
• 激活方式可以是自动模式（焦点即选中）或手动模式（按 Space/Enter 选中）；当激活标签页会触发耗时操作时，建议使用手动模式。

采用移动式 tabindex：仅当前选中的标签页设置 tabindex="0"。

常见错误

• 所有标签页均设置 tabindex="0"——Tab 键将依次遍历每个标签页，而非跳入面板。
• 缺少将 tab 关联至 tabpanel 的 aria-controls 属性。
• 多个标签页同时设置 aria-selected="true"。
• 使用 <a href="#section"> 实现标签页——URL 片段会随之改变，退后键将在标签页之间导航，导致模式失效。
• 激活后缺少焦点管理：点击标签页后面板内容已更新，但下一次按 Tab 键却回到页面头部，而非进入面板。

示例

<div role="tablist" aria-label="Account settings">
  <button role="tab" id="t-profile"  aria-selected="true"  aria-controls="p-profile"  tabindex="0">Profile</button>
  <button role="tab" id="t-billing"  aria-selected="false" aria-controls="p-billing"  tabindex="-1">Billing</button>
  <button role="tab" id="t-security" aria-selected="false" aria-controls="p-security" tabindex="-1">Security</button>
</div>
<section role="tabpanel" id="p-profile"  aria-labelledby="t-profile"  tabindex="0">…</section>
<section role="tabpanel" id="p-billing"  aria-labelledby="t-billing"  hidden>…</section>
<section role="tabpanel" id="p-security" aria-labelledby="t-security" hidden>…</section>