html选项卡要真正可访问，必须用role="tablist"、role="tab"和role="tabpanel"三者严格配对；button[role="tab"]是唯一推荐写法，因其自带焦点、空格/回车触发及禁用语义；aria-controls与aria-labelledby须双向精确匹配id，键盘导航需手动js支持arrow/home/end键，并用hidden属性+视觉隐藏控制非激活面板。
HTML选项卡要真正可访问，不能只靠CSS切换显隐或用div模拟按钮——屏幕阅读器和键盘用户根本感知不到这是个选项卡，更没法用方向键切换。必须用role="tablist"、role="tab"和role="tabpanel"三者严格配对，并手动管理焦点与状态。
为什么button[role="tab"]是唯一推荐写法
用a标签会触发跳转，用div或h3加role="tab"则缺失原生交互能力：没默认tabindex、不响应空格/回车、禁用时无法同步视觉与语义。只有button自带这些能力，且浏览器和读屏器对其行为有一致预期。
-
button默认在Tab流中，无需手动加tabindex="0"（除非你主动移除了） - 按空格或回车自动触发
click事件，不用额外监听keydown - 设
disabled属性后，既不可聚焦也不可点击，辅助技术会正确播报“已禁用” - 若必须用其他元素（如
span），就得补全tabindex="0"、role="tab"、aria-selected、keydown监听和focus样式——极易漏掉其中一环
aria-controls和aria-labelledby必须双向严格匹配
这两个属性不是装饰，是屏幕阅读器建立“按钮↔面板”控制关系的唯一依据。值不一致、大小写错误、用了class或data-tab代替id，NVDA或VoiceOver就完全无法关联。
-
button[role="tab"]的aria-controls值，必须等于目标div[role="tabpanel"]的id（例如aria-controls="panel-about"↔id="panel-about"） -
div[role="tabpanel"]的aria-labelledby，必须指向对应button的id（不是data-tab，也不是文本内容），例如aria-labelledby="tab-about"↔id="tab-about" - 别用
data-tab="about"然后在JS里拼document.getElementById("about")——这只能控制显隐，对无障碍无效；ARIA关联必须靠属性值硬绑定 - 所有ID必须全局唯一、不含空格、区分大小写；用
about-panel和aboutPanel会被视为两个不同ID
键盘导航必须手写JS，浏览器不自动支持
加了role="tablist"不等于有了左右箭头切换。Chrome可能部分响应，但Safari + VoiceOver基本不认，必须用keydown监听并手动移动焦点。
- 给
tablist容器绑定keydown，捕获"ArrowRight"、"ArrowLeft"、"Home"、"End" - 维护一个按钮数组，用
Array.prototype.indexOf()找当前焦点索引，计算下一个目标位置 - 调用
nextButton.focus()后，立刻同步更新aria-selected="true"和对应tabpanel的hidden状态 - 别依赖
autofocus或tabindex="0"让面板自动获得焦点——切换后需手动panel.firstElementChild?.focus()，否则键盘用户按Tab直接跳出组件
隐藏非激活面板不能只靠display: none
仅用CSS隐藏会导致屏幕阅读器仍朗读内容，或完全跳过——取决于渲染引擎和辅助技术组合。正确做法是保留DOM结构，用语义化方式控制可访问性状态。
- 非激活
tabpanel必须设hidden属性（或aria-hidden="true"），同时配合视觉隐藏（如clip-path: inset(50%)或position: absolute; clip: rect(1px, 1px, 1px, 1px)） - 激活面板移除
hidden，并确保其首个可聚焦子元素（如h2、button或input）能被focus()命中 - 避免用
visibility: hidden——它保留布局空间，但屏幕阅读器可能仍读取内容 - 别在JS里直接操作
style.display = "none"，这容易和外部CSS冲突，也绕过了hidden的语义保障
最常被忽略的点是：键盘用户切到新面板后，焦点没落在内容里，而是悬在按钮上；或者多个tablist共存时，没用aria-label区分用途，导致NVDA只报“选项卡列表”，用户不知道这是导航还是设置面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
