探究HTML全局属性accesskey在单页面应用路由中的激活-html教程-PHP中文网

accesskey在spa中仅聚焦元素，不触发路由导航；需手动监听keydown并调用router.push等实现跳转，同时清理残留accesskey避免冲突。

探究html全局属性accesskey在单页面应用路由中的激活

accesskey 在 SPA 路由中根本不会自动激活导航

它不触发 pushState、不调用路由守卫、不刷新视图——只做一件事：把焦点移到带 accesskey 的元素上。哪怕你给一个 <a href="/settings"></a> 加了 accesskey="s"，按下 Alt+S 后，浏览器也只聚焦该链接，不会跳转；用户还得再按 Enter 才可能触发默认行为（前提是没被 JS 阻止）。

这在 SPA 中尤其危险：焦点移过去后，document.activeElement 变了，但当前路由、组件状态、URL hash 或 history.state 全都没变。如果你依赖 focus 事件做副作用（比如展开侧边栏），很容易和路由状态脱节。

React/Vue/Angular 中，accesskey 不会触发任何框架级生命周期钩子
若链接是用 router-link 或 <link> 封装的，原生 accesskey 通常失效（因为渲染后不是原生 <a></a>，或被 preventDefault 拦截）
Vue Router 的 <routerlink></routerlink> 默认不响应 accesskey，除非显式加 tabindex="0" 并监听 keydown 模拟点击

想让 accesskey 真正“跳路由”，必须手动绑定 click 或 navigate

别指望浏览器自动处理。你要在 accesskey 触发 focus 后，用 JS 补一手逻辑：

例如，在按钮上同时设 accesskey="h" 和 id="nav-home"，然后监听 focus 事件：

document.getElementById('nav-home').addEventListener('focus', () => {
  // 确保不是误聚焦（比如从输入框切出来）
  if (document.activeElement.id === 'nav-home') {
    router.push('/home'); // Vue Router
    // 或 history.pushState(null, '', '/home'); // 原生
  }
});

但注意：focus 事件无法区分是鼠标点的、Tab 进来的，还是 accesskey 触发的——所以更稳妥的是监听 keydown，直接捕获组合键：

Accessibility Review

对设计或页面进行 WCAG 2.1 AA 无障碍审计。触发关键词：“audit accessibility”、 “check a11y”、 “is this accessible?” 或在审查设计时使用。

下载

用 event.key === 'h' && event.altKey（Windows/Linux）或 event.metaKey && event.altKey（macOS）判断
必须加 event.preventDefault()，否则可能触发浏览器默认行为（如打开历史记录）
要排除 input、textarea、contenteditable 等上下文，避免干扰用户打字