标记当前活跃 tab 面板需同时设 tabindex="0"（使其可聚焦）并管理其他面板为 tabindex="-1"；aria-selected 仅用于 role="tab" 按钮，不可用于 tabpanel；tabpanel 必须通过 aria-labelledby 关联对应 tab ID，并用 aria-hidden 与视觉隐藏配合控制显示。
要标记当前活跃的 tab 面板，关键不是只设 aria-selected="true"，而是必须同时配合 tabindex="0"（让其可聚焦）和正确管理其他面板的 tabindex="-1"，否则屏幕阅读器可能无法准确传达“当前选中”状态，键盘用户也无法通过 Tab 键到达该面板内容。
tab 面板（tabpanel）本身需要可聚焦
默认情况下，<div role="tabpanel"> 是不可聚焦的。即使设置了 aria-selected="true"，它对键盘导航和读屏器没有实际意义。
- 给当前活跃的
tabpanel设置tabindex="0"，使其能被键盘聚焦（例如按 Tab 进入） - 其他非活跃的
tabpanel应设tabindex="-1"（可编程聚焦，但不进入 Tab 键顺序） - 不要给
tabpanel设tabindex="0"后又隐藏它（display: none或hidden），否则会破坏可访问性逻辑
aria-selected 只用于 tab 按钮（tab），不用于面板
aria-selected 的语义对象是 role="tab" 元素，不是 tabpanel。它是用来告诉辅助技术“哪个 tab 按钮当前被选中”，属于标签页控件的视觉/状态反馈层。
- 当前激活的
<button role="tab">应设aria-selected="true" - 其他
tab按钮应设aria-selected="false"（显式声明更稳妥） -
tabpanel上写aria-selected是无效且不符合 ARIA 规范的，应移除
确保 aria-labelledby 正确关联 tab 和 panel
每个 tabpanel 必须通过 aria-labelledby 显式指向对应的 tab 按钮 ID，这样屏幕阅读器才能将面板内容与当前选中的 tab 标签建立语义联系。
- 例如：
<div role="tabpanel" aria-labelledby="tab-home"> - 对应 tab：
<button id="tab-home" role="tab" aria-selected="true">首页</button> - 这个关联在切换时必须同步更新：换 tab 时，新 panel 的
aria-labelledby要指向新 tab 的 ID
隐藏非活跃面板要用 visibility + aria-hidden，而非 display:none
单纯用 display: none 会让屏幕阅读器完全忽略该 panel，即使它有 tabindex="-1"。理想做法是结合视觉隐藏与语义控制：
- 非活跃 panel：添加
aria-hidden="true"，并用visibility: hidden; position: absolute;等方式视觉隐藏（保留 DOM 结构和焦点能力） - 活跃 panel：设
aria-hidden="false"（或不设，默认为 false），并确保可见 - 避免用
hidden属性或display: none直接移除可访问性上下文
