不是标签页，仅支持单个折叠面板的展开/收起，缺乏互斥逻辑、ARIA属性（如aria-selected）、焦点管理及键盘方向键导航，无法满足WAI-ARIA标签页模式要求；真标签页须用role="tablist"+role="tab"+role="tabpanel"结构配合JS控制。
原生 details 标签不叫“标签页”，也不支持点击切换标签逻辑；它只是折叠面板，展开/收起由浏览器原生控制，没有 tab 切换行为。真要做标签页（tab），得用 button + aria-selected + 显隐控制，和手风琴是两套语义、两套交互。
为什么 details 不能当标签页用
details 的设计目标是「可选内容的显隐」，不是「互斥视图切换」。它的 open 属性只控制自身状态，不会影响其他 details，也不提供当前激活项标记（如 aria-selected="true"）。标签页需要：当前项高亮、其他项隐藏、键盘方向键切换、屏幕阅读器能读出“第2个标签，已选中”——这些 details 都不支持。
- 点一个
details，其他仍可开着 → 不符合标签页“单视图”预期 -
summary没有role="tab"或aria-controls，辅助技术无法识别为标签 - 无法用 →/← 键在标题间移动，
details只响应空格/回车触发展开 - 没有
tabpanel对应结构，WAI-ARIA 标签页模式要求严格配对
想实现标签页，该用什么 HTML 结构
必须放弃 details，改用 WAI-ARIA 推荐的 tablist + tab + tabpanel 模式。核心是语义正确、属性同步、JS 控制状态。
- 外层容器加
role="tablist" - 每个标题用
<button role="tab" aria-selected="false" aria-controls="panel-1"></button> - 每个内容区用
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <li>点击时，仅更新当前 <code>button的aria-selected="true"，并设对应tabpanel的aria-hidden="false"，其他全部设为false - 必须用 JS 同步
tabindex：激活项tabindex="0"，其余tabindex="-1"，否则键盘无法聚焦 - 没
role="tab"，屏幕阅读器读作“可展开的组”，不是“标签” - 没
aria-selected，用户不知道哪个是当前视图 - 没
tabindex管理，方向键切换完全失效 - 若页面有表单或焦点管理逻辑，这种“伪标签”会破坏整体可访问性流
details 能勉强“模拟”标签页吗？别试
有人试图给多个 details 加 JS 监听 toggle，再手动关掉其他——这只能做出“单开手风琴”，不是标签页。它缺三样关键东西：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
强行复用 details 做标签页，最终要补的 JS 和 ARIA 比直接写 tablist 还多，且效果不可靠。
手风琴和标签页的边界在哪
真正容易混淆的点在于：两者都涉及“点标题显示内容”。但意图不同——手风琴是「渐进披露信息」，标签页是「切换不同功能/视图」。比如 FAQ 页面用 details 天然合适；而“设置 > 账户 / 安全 / 通知”这种必须用 tablist。
如果你正在调试一个“点了没反应”或“键盘操作失灵”的所谓“标签页”，先检查是否误用了 details ——这是最常被忽略的语义错位。
