HTML键盘导航与可访问性优化指南

关键不是随便加个数字：

• 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 精准控制：