HTML怎么做键盘导航_html键盘无障碍导航实现做法【攻略】

HTML怎么做键盘导航_html键盘无障碍导航实现做法【攻略】并不只看表面做法，关键还要理解相关条件、限制和后续影响。

tabindex 是控制元素是否可聚焦及在 Tab 键导航中顺序的属性；默认可聚焦元素包括 <a>（带 href）、<button>、<input> 等，容器类元素如 <div> 需显式设 tabindex="0" 才可聚焦，但仅应对真正可交互元素启用；tabindex="-1" 支持脚本聚焦却不进入 Tab 流，适用于模态框首元素或 skip link 目标；skip link 必须置于文档最前、用 display: block 视觉隐藏但保焦点可达；键盘事件应监听 keydown、校验 event.key 并排除组合键，确保所有交互支持键盘且焦点始终可见、顺序合理。

tabindex 是什么，哪些元素默认可聚焦

键盘导航的核心是让焦点能按逻辑顺序落在可操作元素上。tabindex 控制元素是否进入 Tab 键流、以及顺序优先级。不是所有元素默认可聚焦：只有 <a>（带 href）、<button>、<input>、<select>、<textarea> 等原生表单控件默认有 tabindex="0"；<div>、<span>、<li> 这类容器默认不可聚焦，必须显式加 tabindex="0" 才能被 Tab 到。

常见错误是给非交互元素（比如纯展示的 <div class="card">）加 tabindex="0"，结果用户 Tab 进去却不知道能干什么——这违反无障碍原则。只对真正需要键盘触发行为的元素启用聚焦。

如何用 tabindex="-1" 实现程序化聚焦但不进 Tab 流

tabindex="-1" 让元素可通过 JavaScript 的 .focus() 聚焦，但不会出现在自然 Tab 顺序中。这是模态框（modal）关闭按钮、错误提示跳转、或动态加载内容后自动聚焦的关键技巧。

1. 模态框打开后，立即对第一个可操作元素执行 element.focus()，它必须有 tabindex="-1" 或原生可聚焦属性
2. 避免对 tabindex="-1" 元素写 onkeydown 却没处理 Enter/Space，否则键盘用户无法激活
3. 不要滥用：tabindex="-1" 不等于“隐藏焦点”，它只是绕过 Tab 流；若元素视觉上不可见，还应加 aria-hidden="true" 配合

为什么 skip link 必须放在文档最开头且用 display: block

<a href="#main" class="skip-link">跳转到主要内容</a> 这类跳过导航链接，必须作为页面第一个可聚焦元素，否则键盘用户得先按几十次 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（已弃用），并排除组合键干扰：

1. 用 if (event.key === 'Enter' || event.key === ' ') { ... } 处理按钮激活
2. 对自定义下拉菜单，监听 ArrowDown/ArrowUp，但需 if (!event.ctrlKey && !event.altKey && !event.metaKey) 排除系统快捷键
3. 禁止在 keydown 中调用 event.preventDefault() 除非你明确接管该键行为（比如拦截 Tab 自定义循环），否则会破坏基础导航

最容易被忽略的是：键盘导航不只是“能 Tab 进去”，还要确保焦点始终可见（靠 outline 或自定义 focus 样式）、焦点顺序符合视觉流（用 DOM 顺序或 tabindex 显式控制）、以及所有交互都支持键盘触发（不只是鼠标 click）。缺一环，对屏幕阅读器用户或仅用键盘操作的人就是断路。