标记当前活跃 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"。理想做法是结合视觉隐藏与语义控制: - 对应 tab: