tabpanel 必须用 aria-labelledby 显式指向 tab 按钮的 id，因 role="tabpanel" 无自动语义关联能力；需确保 tab 按钮有 id、aria-labelledby 值严格匹配、切换时同步更新，且配合 hidden 与 aria-hidden 安全隐藏非激活面板。
tabpanel 必须用 aria-labelledby 显式指向 tab 按钮的 id
role="tabpanel" 本身不自带语义关联能力，它必须通过 aria-labelledby 主动绑定到对应 <button role="tab"> 的 id，否则屏幕阅读器无法把面板内容和当前选中的标签页建立逻辑联系。
常见错误是只写 aria-controls 在 tab 上，却忘了在 panel 上配对写 aria-labelledby；或者写了但值拼错（大小写、连字符、空格不一致）。
-
aria-labelledby的值必须是目标 tab 按钮的id字符串，比如<button id="tab-profile">→ panel 就得写aria-labelledby="tab-profile" - tab 按钮本身也要有
id，不能只靠data-tab或 class 匹配 - 切换时这个属性必须同步更新：换 tab 后，新 panel 的
aria-labelledby要立刻指向新 tab 的id，否则读屏器会朗读旧标题
不要用 aria-controls 替代 aria-labelledby
aria-controls 是单向声明（tab → panel），只表示“这个 tab 控制那个 panel”，但它不构成语义归属关系。而 aria-labelledby 是反向绑定（panel ← tab），告诉辅助技术“这段内容的标题来自哪个元素”，这才是读屏器播报面板时依据的来源。
漏掉 aria-labelledby 的典型现象：VoiceOver 或 NVDA 进入 panel 时只读“区域”，不读“设置”或“帮助”这类 tab 标题，用户完全不知道当前在哪块内容里。
立即学习“前端免费学习笔记（深入）”；
- tab 按钮写
aria-controls="panel-settings"是必要但不充分的 - 对应 panel 必须同时写
id="panel-settings"和aria-labelledby="tab-settings" - 二者
id和引用值必须逐字符一致，建议全小写+短横线命名，避免下划线或驼峰
hidden 属性和 aria-hidden 配合使用才安全
仅靠 CSS display: none 或 visibility: hidden 隐藏非激活 panel，会导致读屏器跳过内容，但键盘焦点仍可能落到里面——这是可访问性断裂点。正确做法是用 hidden 属性 + aria-hidden="true" 双保险。
- 激活的 panel：移除
hidden，设aria-hidden="false"（显式更稳妥），并确保tabindex="0" - 非激活的 panel：加上
hidden，设aria-hidden="true"，且tabindex="-1" - 不要用
display: none替代hidden，它绕过 ARIA 状态管理，读屏器行为不可控
tab 按钮必须用 <button>，且带 role="tab"
div 或 span 即使加了 role="tab"，也缺乏原生聚焦、空格/回车触发能力，键盘用户无法操作。只有 <button type="button"> 才能天然支持交互，再配合 ARIA 属性才是合规起点。
- 按钮必须有
id，这是aria-labelledby的唯一合法锚点 - 首次加载时，激活态按钮要设
aria-selected="true"，其他为"false"（显式声明） - 不要用
<a href="#">模拟 tab：会触发页面跳转、破坏历史栈，且缺少aria-selected管理逻辑
aria-labelledby 的双向同步——它不像视觉样式那样“看起来对就行”，而是读屏器解析 DOM 时严格按字符串匹配的硬依赖。一旦 tab 切换后没及时更新 panel 的该属性，整个语义链就断了。 
