标记当前活跃 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）本身需要可聚焦

默认情况下，

是不可聚焦的。即使设置了 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 按钮当前被选中”，属于标签页控件的视觉/状态反馈层。

• 当前激活的 应设 aria-selected="true"
• 其他 tab 按钮应设 aria-selected="false"（显式声明更稳妥）
• tabpanel 上写 aria-selected 是无效且不符合 ARIA 规范的，应移除

确保 aria-labelledby 正确关联 tab 和 panel

每个 tabpanel 必须通过 aria-labelledby 显式指向对应的 tab 按钮 ID，这样屏幕阅读器才能将面板内容与当前选中的 tab 标签建立语义联系。

• 例如：
• 对应 tab：首页
• 这个关联在切换时必须同步更新：换 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 直接移除可访问性上下文