accesskey 属性用于设置 html 元素的键盘快捷键，但仅将焦点移至元素，需再按 enter 或空格触发操作；因兼容性差、易冲突、移动端不支持等原因，不建议作为核心交互手段。
HTML 元素的快捷键主要通过 accesskey 属性设置，但它不是“按下就执行操作”的热键，而是帮助键盘用户快速将焦点移到目标元素上——后续还需按 Enter 或空格才能触发（如点击按钮、输入文字）。实际项目中它可靠性低，不建议作为核心交互手段。
accesskey 的基本写法和触发方式
给支持的语义化元素添加 accesskey 属性即可：
<button accesskey="s">保存</button>@#@#@#@#@#@#@#@#@#@0-
<label for="search" accesskey="s">搜索</label><input type="text" id="search">（推荐搭配 label，体验更自然）
用户需配合平台特定组合键触发焦点：
- Windows/Linux：Alt + 对应字符（如 Alt+S）
- macOS：Ctrl + Option + 字符（Safari 还需再按 Enter 才激活）
- 值不区分大小写，但必须是单个可打印字符（字母优先，避免数字或符号）
为什么它常“失灵”或不被使用
accesskey 在真实场景中容易失效，主要原因包括：
- 系统或浏览器已占用该组合键（如 Alt+F 打开菜单、Ctrl+S 保存页面）
- 不同浏览器触发逻辑不一致（Firefox 要 Alt+Shift+S，Chrome 只要 Alt+S）
- 屏幕阅读器可能忽略或重映射，导致辅助技术用户行为不一致
- 移动端 Safari 完全不支持，iOS 和 Android 均无响应
- 用户根本不知道快捷键存在，缺乏可见提示
如果非要使用，至少做到三点
降低风险、提升可用性，需主动设计：
- 选冷门字符：避开 a、f、e、h、s、t 等高频系统键，优先用 z、x、q 或数字 1–9
- 加视觉提示：用 CSS 或 HTML 显示快捷键标识，例如
button::after { content: " (Alt+" attr(accesskey) ")"; } - 只用于语义明确的交互元素：
<button></button>、@#@#@#@#@#@#@#@#@#@1+<main id="main"></main>），这是 WCAG 强烈推荐的基础能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
