正确使用 <kbd> 标签需结构清晰、语义准确、兼顾可访问性：组合键须拆分为独立 <kbd> 元素，用 aria-hidden="true" 隐藏连接符；macOS/Windows 差异建议 JS 动态处理；快捷键功能需配合 aria-keyshortcuts 和 keydown 事件监听，并阻止默认行为。
用 <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> 只负责“视觉提示”，不等于功能绑定。要让快捷键真正可用，还需：
立即学习“前端免费学习笔记（深入）”；
- 在对应按钮或菜单项上添加
aria-keyshortcuts="Ctrl+S"，告诉辅助技术“按这个能触发” - 用
addEventListener('keydown')监听事件，优先判断e.ctrlKey || e.metaKey和e.key，别用已废弃的keyCode - 务必调用
e.preventDefault()阻止浏览器默认行为（如 Ctrl+T 开新页） - 避开系统级占用组合键（如 Ctrl+R 刷新、Alt+F4 关闭），否则用户会困惑
手册或帮助面板推荐结构化排版
纯 <kbd> 在 PDF 导出、高对比度模式下易失效，建议嵌套在语义容器中：
- 用
<dl><dt><dd>组织：功能描述放<dt>，快捷键放<dd>内部 - 示例：
<dd><kbd>Ctrl</kbd><span aria-hidden="true">+</span><kbd>K</kbd></dd> - 需要浮层提示时，优先用原生
<dialog>元素，它自带模态、焦点管理与可访问性支持
