Tab组件必须用role="tablist"包裹所有标签页，否则屏幕阅读器无法识别为可切换标签组；每个tab需设role="tab"、aria-controls指向对应panel，面板用role="tabpanel"并匹配id，同步管理aria-selected、aria-hidden与tabindex以保障键盘导航和无障碍访问。
Tab组件必须用role="tablist"包裹所有标签页
不加这个角色，屏幕阅读器无法识别这是一组可切换的标签页。只用<div>或<ul>默认没有语义，哪怕视觉上排成一排也没用。
常见错误是直接套个<div class="tabs">就完事，结果AT（辅助技术）把它读作普通容器，用户根本不知道能切换。
- 必须写
<div role="tablist">，不能省略role -
tablist里每个标签页用<button role="tab">，别用<a>或<span>——前者会触发跳转，后者不可聚焦也不响应键盘操作 - 每个
tab需带aria-controls指向对应面板ID，例如aria-controls="panel-1" - 当前激活的tab要加
aria-selected="true"，其他为"false"
面板区域必须用role="tabpanel"且与tab关联
光有tab没用，内容区得让屏幕阅读器知道“这是刚才选中的那个tab对应的内容”。否则用户切过去，听到的只是空白或一堆孤立段落。
典型坑是把面板写成普通<div>，或者用了aria-labelledby但ID拼错、大小写不一致——AT直接忽略关联。
立即学习“前端免费学习笔记（深入）”；
- 每个面板用
<div role="tabpanel" id="panel-1">，ID必须和对应tab的aria-controls值完全一致 - 激活的面板加
aria-hidden="false"，隐藏的面板设为"true"（注意不是display: none，那会让AT彻底跳过） - 建议加
aria-labelledby="tab-1"，让AT读出“面板：XXX”，提升上下文感知 - 面板内避免再嵌套
role="tablist"，除非是子级标签页——否则焦点流容易混乱
键盘交互必须支持ArrowLeft/ArrowRight切换
仅靠鼠标点tab不够。视障用户依赖键盘导航，而默认tab键只能顺序进入每个可聚焦元素，没法在tab之间快速跳转。
很多实现只监听click事件，忘了keydown，结果键盘用户按方向键毫无反应，只能反复Tab进出，体验极差。
- 给
tablist容器绑定keydown事件，捕获ArrowLeft和ArrowRight - 方向键切换时，要同步更新
aria-selected、tabindex（激活tab设为0，其他设为-1），并聚焦到目标tab - 别忘了
Home/End键支持：Home跳第一个，End跳最后一个 - 禁用
preventDefault()对空格/回车的默认行为——它们该触发tab切换，不是滚动页面
视觉隐藏但AT可读的文本需用sr-only类而非display: none
比如“切换到设置页”这种说明性文字，视觉上不需要显示，但对屏幕阅读器很重要。用display: none或visibility: hidden会把它从AT中彻底剔除。
有人图省事写<span style="display:none">设置</span>，结果AT读出来就是“tab，未命名”，用户完全不知道这是干啥的。
- 用CSS类如
.sr-only：绝对定位+宽高0+溢出隐藏+clip裁剪，确保视觉不可见但AT可读 - 所有
tab按钮内部，建议放<span class="sr-only">切换至</span>设置这类辅助文本 - 不要依赖图标 alone——没有alt或ARIA文本的图标，AT基本不读
- 检查Chrome DevTools的Accessibility面板，看“Name”字段是否包含合理可读文本
aria-selected、面板的aria-hidden、焦点位置、tabindex值，四者必须严格一致，漏掉任何一个，AT就会读错或跳过内容。 
