tabindex 是控制元素是否可聚焦及在 tab 键导航中顺序的属性；默认可聚焦元素包括 （带 href）、、 等，容器类元素如 需显式设 tabindex="0" 才可聚焦，但仅应对真正可交互元素启用；tabindex="-1" 支持脚本聚焦却不进入 tab 流，适用于模态框首元素或 skip link 目标；skip link 必须置于文档最前、用 display: block 视觉隐藏但保焦点可达；键盘事件应监听 keydown、校验 event.key 并排除组合键，确保所有交互支持键盘且焦点始终可见、顺序合理。
tabindex 是什么，哪些元素默认可聚焦
键盘导航的核心是让焦点能按逻辑顺序落在可操作元素上。tabindex 控制元素是否进入 Tab 键流、以及顺序优先级。不是所有元素默认可聚焦：只有 @#@#@#@#@#@#@#@#@#@0 这类跳过导航链接，必须作为页面第一个可聚焦元素，否则键盘用户得先按几十次 Tab 才能跳过 header 和菜单。
CSS 必须用 display: block + position: absolute + top: -40px 等方式实现“视觉隐藏但焦点可见”，不能用 visibility: hidden 或 display: none，否则屏幕阅读器和键盘都无法访问。
常见坑：skip-link 没绑定真实 ID（比如 href="#main" 但页面没有 id="main"），或目标元素没设 tabindex="-1" 导致聚焦后无视觉反馈。
键盘事件监听时，为什么只响应 keydown 且要过滤 key
用 keydown 而非 keyup 或 keypress，因为前者能捕获所有键（包括 Tab、Escape、方向键），后者在现代浏览器中已废弃且不触发修饰键。
必须检查 event.key 而非 event.keyCode（已弃用），并排除组合键干扰：
- 用
if (event.key === 'Enter' || event.key === ' ') { ... }处理按钮激活 - 对自定义下拉菜单，监听
ArrowDown/ArrowUp，但需if (!event.ctrlKey && !event.altKey && !event.metaKey)排除系统快捷键 - 禁止在
keydown中调用event.preventDefault()除非你明确接管该键行为（比如拦截Tab自定义循环），否则会破坏基础导航
最容易被忽略的是：键盘导航不只是“能 Tab 进去”，还要确保焦点始终可见（靠 outline 或自定义 focus 样式）、焦点顺序符合视觉流（用 DOM 顺序或 tabindex 显式控制）、以及所有交互都支持键盘触发（不只是鼠标 click）。缺一环，对屏幕阅读器用户或仅用键盘操作的人就是断路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
