必须用 role="tablist" 构建语义化选项卡，配合 aria-controls/aria-labelledby 双向绑定、tabindex 管理、hidden 属性与 aria-selected 同步控制显隐，并实现箭头键导航及响应式角色切换。

用 role="tablist" 搭建语义化结构是必须的

只靠 div 堆砌或纯 CSS（比如 :checked）实现的选项卡，对屏幕阅读器和键盘用户基本不可用。浏览器不会识别“看起来像 tab”的元素为可交互控件，Tab 键无法进入，ArrowRight 也切不了页签。

正确起点是：外层容器加 role="tablist"，每个页签用 ，对应内容区用

。三者必须通过属性双向绑定：

• button 上设 aria-controls="panel-id"，指向面板 ID
• tabpanel 上设 aria-labelledby="tab-id"，反向指向按钮 ID
• 所有 tab 按钮需有 tabindex="0"，当前激活项改 tabindex="-1"

切换时同步控制 aria-selected 和 hidden 属性

仅靠 CSS 的 display: none 或 visibility: hidden 隐藏非激活面板，屏幕阅读器仍可能朗读内容，且会干扰焦点管理。真正有效的隐藏方式是操作 hidden 属性 + aria-selected 状态。

• 激活的 tab 按钮设 aria-selected="true"，其余为 "false"
• 对应 tabpanel 移除 hidden 属性；其他全部加上 hidden
• 不要手动写 style.display = "none" —— 容易和外部样式冲突，尤其含 position: absolute 子元素时尺寸计算异常
• 在 CSS 中统一定义 [hidden] { display: none; }，不加 !important

键盘导航不能只靠默认 tabindex 顺序

用户按 Tab 进入 tablist 后，期望用左右箭头切换页签、Enter 激活、Home/End 跳首尾。这无法靠自然 DOM 顺序实现，必须监听 keydown 并手动管理焦点。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 给 tablist 容器设 tabindex="0"，确保可聚焦
• 监听 ArrowLeft/ArrowRight，用 Array.prototype.indexOf() 找当前焦点索引，计算下一个并调用 .focus()
• 按 Home 时聚焦第一个，End 时聚焦最后一个
• 必须调用 e.preventDefault()，否则 ArrowRight 会触发页面横向滚动
• 垂直排列 Tab 时，显式加 aria-orientation="vertical"，否则屏幕阅读器仍按水平逻辑播报

框架中别手动查 DOM 切 hidden，优先用条件渲染

在 React/Vue 里硬写 document.getElementById("panel-2").hidden = false，既破坏响应式数据流，又让组件状态和 DOM 不一致，测试困难，且容易漏掉 aria-hidden、tabindex 等同步更新。

• React 推荐用 useState 管理当前 active key，配合 {activeKey === "user" && }
• Vue 推荐用 v-if 或 v-show（后者保留 DOM，适合表单场景）
• 避免用 v-if 销毁含表单、定时器、动画的组件——输入内容会清空，倒计时会重置
• 若需保持状态但隐藏视觉，用 aria-hidden="true" + tabindex="-1" + CSS 控制显隐更稳妥

最常被跳过的点是响应式断点下的角色退化：小屏时横向 Tab 折叠成下拉菜单，role="tablist" 就不再适用，得动态切为 role="combobox" 或 role="menu"。这个逻辑一旦漏掉，移动端键盘用户就彻底卡死。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！