hidden属性+role="tab"+键盘事件接管是唯一满足表单不丢值、媒体自动暂停、读屏器准确跳过且Safari/VoiceOver可用的方案；display:none仅视觉隐藏，DOM仍在运行，导致焦点丢失、video持续缓冲、读屏器误读且无障碍树为空。

用 hidden 属性 + role="tab" + 键盘事件接管，是目前唯一能同时满足表单不丢值、媒体自动暂停、读屏器准确跳过且 Safari/VoiceOver 可用的方案。

为什么不能只靠 display: none 切换？

它只是视觉隐藏，DOM 仍在运行：含 的面板切走后，再切回时焦点丢失、滚动位置重置； 在 Safari 下持续缓冲甚至静音播放；屏幕阅读器仍可能读出内容（尤其没配 aria-hidden 时）。更关键的是，display: none 元素根本不在无障碍树里——你在 Chrome DevTools 的 Accessibility 面板里选中它，三列数据（Computed Role/Name/States）会直接为空。

常见错误现象：

• 用户按 Tab 进入标签区后，方向键无法切换页签
• VoiceOver 读出已隐藏面板里的文字
• 切换后 重新加载，登录态丢失

必须写的 ARIA 结构和属性

结构不是可选项，是读屏器识别逻辑的基础。漏掉任意一项，键盘用户就卡死在第一个按钮上。

• 外层容器加 role="tablist"，不能用
  或

  纯样式模拟
• 每个页签用 ，禁用默认表单提交行为
• 按钮必须带 aria-controls="panel-home"，指向对应面板 ID
• 面板写成
  ，aria-labelledby 必须指回按钮 ID
• 激活页签设 aria-selected="true"，非激活页签设 aria-selected="false"

切换时 JS 必须同步更新的三项

只改 hidden 或只改 class，读屏反馈就会错乱。Chrome 和 Safari 对 role="tab" 的键盘支持不一致，必须手动同步状态。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• 所有面板设 element.hidden = true，目标面板设 false
• 所有页签按钮设 aria-selected="false"，目标按钮设 "true"
• 非激活面板加 aria-hidden="true"，激活面板设 "false"（hidden 属性本身已让读屏器跳过，但双重保险更稳）
• 切换完成后，调用 document.querySelector('#panel-home').focus()，聚焦到面板首个可交互元素（如第一个 ）

键盘导航不能只靠原生 Tab 键

Tab 键负责进入/离开 tab 区域，左右箭头、Home/End 才负责在页签间切换——这个逻辑必须由 JS 实现，浏览器不自动提供。

实操要点：

• 给 role="tablist" 容器绑定 keydown 事件，监听 e.key === 'ArrowRight' 等
• 维护一个按钮数组，用 Array.prototype.indexOf() 找当前焦点索引
• 箭头越界时循环：到末尾再按右箭头 → 跳回第一个
• Safari + VoiceOver 下，Enter/Space 可能触发两次（按钮原生 + JS 监听），需加防重复执行标记
• 小屏下若 tab 横向布局被挤成下拉菜单，必须动态把 role="tablist" 改为 role="combobox"，否则键盘逻辑彻底失效

最易被忽略的点：首次加载时，**默认激活面板的 hidden 属性必须手动移除**，否则白屏；hidden 是 HTML5 原生语义，IE 不支持，如需兼容，得回退到 display: none + 手动管理 tabindex 和媒体状态。