概述
标签页看似简单，实则不然。屏幕阅读器需要角色与关系，键盘用户需要漫游焦点与方向键，非活动面板必须被真正隐藏。三者都做好，才能避免只有外观达标的组件。
关键步骤
- 列表设置 role=tablist，触发器角色为 tab，面板角色为 tabpanel 并用 aria-labelledby 关联。
- 使用漫游 tabindex，使只有当前标签处于 Tab 顺序中。
- 处理左右方向键移动焦点、Home/End 跳转，并在激活或聚焦时切换。
- 同步 aria-selected，并把非活动面板移出无障碍树。
验证
- Tab 只进入组件一次，方向键可切换标签。
- 屏幕阅读器能读出标签名称、角色与选中状态。
- 非活动面板无法通过键盘到达。
- Home 与 End 可跳到首尾标签。
注意事项
- 方向键自动激活对开销较大的面板可能造成困扰，此时手动激活更稳妥。
- 该模式不涵盖垂直或循环标签页，它们需要额外的按键处理。
<ul role="tablist">
<li role="tab" aria-selected="true" tabindex="0">Overview</li>
<li role="tab" aria-selected="false" tabindex="-1">Settings</li>
</ul>
<div role="tabpanel" aria-labelledby="tab-overview">…</div>