accesskey属性在现代浏览器中基本靠不住，仅适合辅助功能场景；chrome/firefox/edge虽支持但触发方式不统一（如windows下chrome为alt+键、firefox为alt+shift+键），safari默认禁用且需手动开启，跨平台冲突多、移动端完全不支持。
accesskey 属性在现代浏览器中到底靠不靠谱
基本靠不住，但不是完全没用。Chrome、Firefox 和 Edge 支持 accesskey，但触发逻辑不一致：Chrome 要按 Alt+字母（Windows/Linux）或 Ctrl+Option+字母（macOS），Firefox 是 Alt+Shift+字母（Windows/Linux），macOS 下更混乱。Safari 自 16.4 起才支持，且默认禁用——用户必须手动开启「在网页中使用键盘快捷键」选项。这意味着，除非你明确面向内部系统且能控制用户环境，否则别指望它对普通用户生效。
怎么写 accesskey 才不至于被浏览器忽略
浏览器会跳过重复、空值、含空格或不可见字符的 accesskey 值；还会过滤掉与系统快捷键冲突的键（比如 accesskey="w" 在 Chrome 中可能被窗口管理劫持）。实操建议如下：
-
accesskey值必须是单个可打印 ASCII 字符（a–z、A–Z、0–9、-、=等），避免accesskey="ctrl+s"这类写法——它会被静默忽略 - 按钮需有明确语义和可见文本，例如
<button accesskey="s">保存</button>；纯图标按钮（<button accesskey="h"><span aria-hidden="true">?</span></button>）容易被跳过或无法被屏幕阅读器关联 - 不要绑定到隐藏元素或
display: none的节点上——即使 DOM 存在，accesskey也不会激活 - 多个相同
accesskey值时，浏览器行为未标准化；Firefox 会聚焦第一个匹配元素，Chrome 可能随机或忽略
如何检测 accesskey 是否实际生效
没有标准 API 可查，只能靠人工验证 + 辅助工具交叉确认：
- 在目标浏览器中打开页面，尝试对应组合键，观察焦点是否落到预期元素上（注意：焦点样式需可见，检查
:focusCSS 是否被覆盖） - 用开发者工具选中元素，执行
getComputedAccessibleName(element)（在 Accessibility 面板下），确认其可访问名称非空且与按钮文本一致 - 运行 Lighthouse（Accessibility 类别），它会报出
accesskey值重复、缺失标签、或绑定到无交互能力元素的问题 - 特别注意 macOS + VoiceOver 组合：某些
accesskey会被 VoiceOver 拦截为自身命令（如"h"是“跳到标题”），导致你的按钮完全不响应
比 accesskey 更可靠的快捷键替代方案
真要实现全局快捷键，应该绕开 accesskey，改用 JavaScript 监听 keydown 事件，并主动聚焦或触发动作：
document.addEventListener('keydown', (e) => {
if (e.altKey && e.key === 's' && !e.ctrlKey && !e.metaKey) {
e.preventDefault();
document.getElementById('save-btn')?.click();
}
});
这样做的好处是可控、可测试、可降级（比如加个 data-hotkey="alt+s" 属性供 UI 提示），缺点是需自行处理焦点管理、模态框拦截、输入框内禁用等细节。最常被忽略的一点：快捷键逻辑必须和键盘布局无关——e.key === 's' 在 QWERTY 键盘下是 S，在 AZERTY 下按同一物理键却是 'q'，所以生产环境建议优先用 e.code（物理键位）而非 e.key（字符值），再配合 KeyboardEvent.getLayoutMap() 做映射校准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
