正确使用 标签需结构清晰、语义准确、兼顾可访问性：组合键须拆分为独立 元素，用 aria-hidden="true" 隐藏连接符；macos/windows 差异建议 js 动态处理；快捷键功能需配合 aria-keyshortcuts 和 keydown 事件监听，并阻止默认行为。
用 <kbd></kbd> 标签展示快捷键，关键不是“套上标签就行”，而是结构正确、语义清晰、兼顾可访问性。浏览器原生支持 <kbd></kbd>，但默认样式简陋，且单独使用容易误导用户或被读屏器误读。
每个物理按键单独包裹
组合键必须拆成独立的 <kbd></kbd> 元素，用普通字符（如 + 或空格）连接，不能塞进一个标签里：
- ✅ 正确：
<kbd>Ctrl</kbd>+<kbd>S</kbd>—— 屏幕阅读器读作“Control 加 S”，语义明确 - ❌ 错误：
<kbd>Ctrl+S</kbd>—— 被当成一个键名，失去组合含义 - ❌ 错误：
<kbd>Ctrl</kbd><kbd>S</kbd>—— 缺少分隔符，视觉粘连，读屏可能连读为“ControlS”
连接符要隐藏可访问性干扰
+、or、/ 这类符号不是按键，不该被读屏器播报：
- 给连接符加
aria-hidden="true"，例如：<kbd>Ctrl</kbd><span aria-hidden="true">+</span><kbd>S</kbd> - macOS 和 Windows 差异建议动态处理：用 JS 检测
navigator.platform，把<kbd>Ctrl</kbd>替换为<kbd>⌘</kbd>，避免硬写两套 HTML
快捷键提示需配合交互语义
<kbd></kbd> 只负责“视觉提示”，不等于功能绑定。要让快捷键真正可用，还需：
- 在对应按钮或菜单项上添加
aria-keyshortcuts="Ctrl+S"，告诉辅助技术“按这个能触发” - 用
addEventListener('keydown')监听事件，优先判断e.ctrlKey || e.metaKey和e.key，别用已废弃的keyCode - 务必调用
e.preventDefault()阻止浏览器默认行为（如 Ctrl+T 开新页） - 避开系统级占用组合键（如 Ctrl+R 刷新、Alt+F4 关闭），否则用户会困惑
手册或帮助面板推荐结构化排版
纯 <kbd></kbd> 在 PDF 导出、高对比度模式下易失效，建议嵌套在语义容器中：
- 用
<dl> <dt></dt> <dd></dd> </dl>组织：功能描述放<dt></dt>，快捷键放<dd></dd>内部 - 示例：
<dd> <kbd>Ctrl</kbd><span aria-hidden="true">+</span><kbd>K</kbd> </dd> - 需要浮层提示时，优先用原生
<dialog></dialog>元素，它自带模态、焦点管理与可访问性支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
