为导航栏a标签添加accesskey后快捷键失效，原因何在？

问题描述 #

为页面导航栏的三个<a>标签分别设置了accesskey="s"、"h"、"c"，对应跳转至#student-info、#html-questions、#css-questions区块。点击这些导航链接可正常跳转，但直接按下s、h、c按键时无任何响应。

相关代码片段：

<nav>
    <ul>
      <li><a accesskey="s" href="#student-info">INFO</a></li>
      <li><a accesskey="h" href="#html-questions">HTML</a></li>
      <li><a accesskey="c" href="#css-questions">CSS</a></li>
    </ul>
</nav>

核心原因 #

accesskey的激活方式并非直接按下单个按键，不同浏览器和操作系统需要搭配特定的修饰键组合才能触发，这是导致直接按单个键无响应的根本原因。

各环境下的触发组合键 #

• Windows/Linux系统：
  • Chrome、Edge、Firefox：Alt + 对应快捷键（Firefox默认使用Alt，若无效可检查dom.accesskey.activation_modifier配置）
  • Opera：Shift + Esc + 对应快捷键
• macOS系统：
  • Safari、Chrome、Edge、Firefox：Ctrl + Option + 对应快捷键

验证方法 #

以Windows系统的Chrome为例，按下Alt+s即可触发跳转到#student-info区块；macOS系统的Chrome则需按下Ctrl+Option+s，其他快捷键以此类推。

额外注意事项 #

• 尽量避免使用与系统或浏览器默认快捷键冲突的按键（比如Ctrl+s是保存操作，不要将s设置为accesskey并搭配可能冲突的修饰键）
• 建议在页面中添加提示文本，告知用户正确的快捷键使用方式，提升页面的可访问性体验

内容的提问来源于stack exchange，提问作者truth313