html个人页面怎么加键盘导航_html可访问性键盘事件【无障碍】

设 tabindex="0" 可

使自定义元素(如 div、span)按 DOM 顺序加入键盘 Tab 导航流;tabindex="-1" 仅支持 JS 主动聚焦;正数 tabindex 易破坏焦点逻辑,应避免。

tabindex 怎么设才让键盘能走到自定义元素上

默认只有 ,浏览器原生支持所有键盘行为

  • 需要 JS 控制的平滑滚动或 SPA 路由:保留 替代 —— 触摸设备无 hover,且某些键盘操作(如 Shift+Tab)可能触发 hover
  • 焦点管理本身不难,难的是每处交互都得同步考虑键盘路径、语义角色、事件响应三者闭环。一个没加 的卡片,或一处漏掉 处理的自定义按钮,就足以让依赖键盘的用户卡在半路。
    element.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleClick();
      }
    });