tabindex="0"使元素可聚焦但需配套键盘操作逻辑，"-1"仅程序化聚焦，禁用正数；按钮/链接优先用原生元素；模态框须锁焦点并正确返回；焦点样式应使用:focus-visible确保仅键盘用户可见。
tabindex 属性怎么设才让键盘用户能进得去、出得来
只加 tabindex="0" 不等于就无障碍了——很多元素默认不可聚焦（比如 div、span），强行加 tabindex="0" 会让它进入 tab 顺序，但若没配套的键盘交互逻辑（如回车/空格触发行为），键盘用户会卡在那儿不知道能干啥。
真正要解决的是「可聚焦 + 可操作 + 有反馈」三件套：
-
tabindex="0"适用于需要键盘进入的容器或自定义控件（如手写的下拉菜单根节点）； -
tabindex="-1"仅用于程序化聚焦（例如模态框打开后element.focus()），它不进 tab 顺序，但能接收焦点； - 永远不要用
tabindex="1"或更高正数——会打乱自然 DOM 顺序，屏幕阅读器和键盘用户的预期全乱； - 移除无意义的
tabindex（比如给纯展示文本的div加tabindex="0"），这只会增加焦点停靠点，降低导航效率。
按钮和链接的 role 与语义别搞混
用 div + onclick 模拟按钮？那就必须补全整套键盘行为：支持空格/回车触发、加 role="button"、设 tabindex="0"，还得手动处理 aria-pressed（如果是切换类按钮）。否则键盘用户按到它时毫无反应，或者按了没反馈。
更稳妥的做法是——直接用原生 button 元素。它自带焦点、空格/回车触发、禁用状态（disabled）语义、以及对 aria-* 属性的原生支持。
- 链接（
a）必须带href，哪怕只是href="#"（注意后续要用 JS 阻止跳转）；纯onclick的div再加role="link"也不如原生链接可靠； -
role="button"不等于按钮，只是“告诉屏幕阅读器它像按钮”，但不提供任何键盘行为，所有交互逻辑得你手写； - 禁用状态优先用
disabled（button、input）或aria-disabled="true"（自定义组件），别只靠 CSS 灰掉 + 移除tabindex——焦点仍可能抵达，只是看起来不能点。
模态框（Modal）的焦点囚笼怎么做不漏项
模态框弹出后，焦点必须锁在内部，且首次打开时自动落到第一个可聚焦元素（通常是标题或主操作按钮）。关掉时，焦点得回到触发它的元素上——这两步漏掉任意一个，键盘用户就会迷失。
实现上不是光靠 focus() 就行，得配合事件拦截：
- 用
focusin事件监听模态框外的焦点尝试，一旦发生，立刻event.preventDefault()并把焦点切回模态框内最后一个/第一个可聚焦元素； - 模态框内可聚焦元素列表得动态生成：
modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')； - ESC 关闭模态框时，记得恢复触发元素的焦点（提前存好
triggerEl = document.activeElement或用data-trigger-id记录）； - 别忘了
aria-modal="true"（虽兼容性有限，但对新版屏幕阅读器是明确信号）和aria-hidden="true"（罩住背景内容）。
键盘焦点样式为什么不能只靠 :focus
很多团队用 :focus { outline: none; } 清掉默认虚线框，再自己画个边框——但这是大忌。因为 :focus 在鼠标点击后也会触发，导致鼠标用户看到奇怪的焦点环；而键盘用户真正需要的是「仅键盘聚焦」的样式。
现代浏览器支持 :focus-visible，它只在键盘触发聚焦时生效，完美解耦：
button:focus { outline: none; }
button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
但要注意兼容性 fallback：
- Chrome / Firefox / Edge 102+ 原生支持；
- Safari 目前仍需 polyfill（如 focus-visible 库）；
- 别用
:focus:not(:hover)代替——触摸屏设备、触控笔、甚至某些蓝牙键盘都会误判为 hover，导致焦点样式消失。
最易被忽略的一点：自定义组件的键盘焦点反馈必须和原生控件一致。比如下拉菜单展开后，选项用方向键高亮，这个高亮状态不能只靠视觉色块，还得同步设置 aria-current="true" 或 aria-selected="true"，否则屏幕阅读器读不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
