HTML页面添加键盘导航与可访问性支持，是提升用户体验和实现无障碍访问的重要步骤。下面将从基础概念、实现方法和最佳实践三个方面详细讲解如何在 HTML 页面中加入键盘导航功能。一、什么是键盘导航与可访问性？1. 键盘导航键盘导航是指用户通过键盘（如 Tab、Enter、Arrow Keys 等）来操作网页内容的功能。对于无法使用鼠标或有身体障碍的用户来说，这是非常关键的交互方式。2. 可访问性（A

关键不是随便加个数字：

• tabindex="0" —— 最常用，元素按 DOM 顺序加入 Tab 流，不改变默认焦点顺序
• tabindex="-1" —— 不能通过 Tab 进入，但可用 JavaScript 主动 .focus() 聚焦（比如模态框打开后自动聚焦标题）
• tabindex="1" 及正数 —— 强制提前聚焦顺序，极易打乱逻辑流，无障碍实践中应避免

键盘操作没响应？检查事件监听是否覆盖了 keydown

仅靠 tabindex 不够，用户按 Enter 或 Space 时还得触发对应行为。别只监听 click —— 键盘用户不会“点击”，他们按键。

正确做法是同时绑定 keydown 并识别关键码：

• 对按钮类元素，监听 Enter（event.key === 'Enter'）和 Space（注意：Space 需 event.preventDefault() 防止页面滚动）
• 避免用 keyCode（已废弃），统一用 event.key 或 event.code
• 如果用了 role="button" 却没处理键盘事件，屏幕阅读器会报“不可操作”，但用户实际按了没反应

element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleClick();
  }
});

导航跳转类链接（如锚点）为什么键盘按了没反应

常见陷阱：用

正确方案分两种场景：

默认浏览器会在所有获得焦点的元素上显示焦点轮廓（比如蓝色环），但鼠标用户觉得碍眼。直接 outline: none 是重大无障碍错误 —— 键盘用户将彻底失去焦点位置感知。

现代解法是用 :focus-visible 精准控制：