标记当前活跃 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 标签建立语义联系。
aria-labelledby 要指向新 tab 的 ID隐藏非活跃面板要用 visibility + aria-hidden,而非 display:none
display: none 会让屏幕阅读器完全忽略该 panel,即使它有 tabindex="-1"。理想做法是结合视觉隐藏与语义控制:
aria-hidden="true",并用 visibility: hidden; position: absolute; 等方式视觉隐藏(保留 DOM 结构和焦点能力)aria-hidden="false"(或不设,默认为 false),并确保可见hidden 属性或 display: none 直接移除可访问性上下文










