HTML无原生快捷键机制，accesskey支持差且易冲突；需用tabindex+keydown实现键盘操作，并配合role/ARIA语义、焦点管理与无障碍反馈。
HTML快捷键本身不支持键盘操作
HTML 标签和属性里没有原生的“快捷键”机制，accesskey 是唯一接近的规范属性，但它只是为元素绑定一个可触发的键盘组合（如 Alt+K），并不等价于“用键盘替代鼠标操作”。浏览器对 accesskey 的支持不一致，且现代 Web 应用普遍绕过它——因为它的行为不可控、无障碍体验差、容易与系统/浏览器快捷键冲突。
用 tabindex + keydown 实现真正可用的键盘操作
要让按钮、卡片、菜单项等支持键盘聚焦和响应（比如按 Enter 或 Space 触发），核心是两步：确保元素可聚焦，再监听键盘事件。常见错误是只加 accesskey 却没处理焦点逻辑，结果按了没反应。
- 给非表单/非链接元素加
tabindex="0"，让它能被Tab进入焦点流 - 监听
keydown事件，区分Enter和Space（后者需preventDefault()防止页面滚动） - 确保视觉反馈：用
:focus-visible或 JS 切换 class 显示焦点框 - 避免在
div上直接绑click—— 键盘用户无法触发，必须靠keydown补齐
button.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
});
role 和 ARIA 属性决定键盘行为是否被正确识别
光有 tabindex 和 keydown 不够。屏幕阅读器和键盘导航依赖语义角色。比如一个模拟下拉的 div，不加 role="combobox" 和 aria-expanded，即使能用键盘打开，辅助技术也完全不知道它是什么、当前状态如何。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 按钮行为用
role="button"，并确保有aria-label或文本内容 - 列表项用
role="listitem"，配合role="list"容器 - 模态框必须含
role="dialog"、aria-modal="true"，且打开时将焦点移入内部首个可聚焦元素 - 禁用状态统一用
aria-disabled="true"，而非仅靠 CSS 灰掉
浏览器原生快捷键会劫持你的自定义逻辑
比如在输入框里按 Ctrl+A 会全选文本，你绑的 keydown 监听器根本收不到这个事件——浏览器在底层就拦截了。类似还有 Ctrl+T、F5、Esc（关闭模态框时除外）。不要试图覆盖这些，而是检查是否真有必要干预。
- 优先使用浏览器默认行为：表单提交用
<form></form>+submit事件，不用Enter手动触发 API - 若必须拦截（如编辑器内
Ctrl+S），先e.preventDefault()，再确认用户意图（例如弹出保存确认） -
Esc关闭浮层是合理场景，但得保证焦点回到触发按钮上，否则键盘用户会“迷失”
真正的键盘操作不是加几个属性就能搞定的事。它依赖焦点管理、语义标记、事件处理三者协同，漏掉任何一环，用户按下去都可能没反应、没反馈、或读不出来。尤其在 SPA 中，路由切换后焦点常丢失，这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
