是唯一语义正确、可访问性达标且被屏幕阅读器识别的键盘输入标记;其他写法会导致语义丢失或读屏错误,如用表示快捷键会被逐字母读出,组合键须拆开写、加号放标签外,Mac键符须用Unicode标准符号,CSS美化不得破坏其行内语义结构。

为什么不能用 包快捷键</h3>
<p>用 <code>Ctrl+S
表示快捷键是常见错误: 标签语义是「代码字面量」,不是「物理按键」。屏幕阅读器会逐字母读作 “C T R plus S”,而非 “Control-S”;搜索引擎也无法区分这是操作指引还是命令语法。真正该用 <code> 的场景是 <code>git commit、fetch() 这类代码或函数名。
组合键必须拆开写,加号放标签外
浏览器和辅助技术依赖 DOM 结构识别按键层级。把多个键塞进一个 里,等于主动放弃语义支持。
- ✅ 正确:Ctrl + Shift + T
- ✅ 跨平台写法:Ctrl / ⌘ + S
- ❌ 错误:Ctrl+Shift+T(会被读成一串字母)
- ❌ 错误:Ctrl + V(空格会被解析为 Space)
Mac 键符要用 Unicode 符号,别写文字
macOS 用户看到 ⌘ 比看到 Cmd 更自然,也更符合系统界面习惯。但这个符号不是普通字符,必须用标准 Unicode 码点:
- ⌘ 对应 U+2318(Command)
- ⌥ 对应 U+2325(Option)
- ⇧ 对应 U+21E7(Shift)
- ⌃ 对应 U+2303(Control)
写 Cmd 或 Command 是文字描述,不是用户实际看到的键帽符号,也不被 VoiceOver 正确映射。
视觉美化可以做,但别动语义结构
默认 样式简陋,加 CSS 是合理需求,但有三个关键约束:
- 必须保留 为行内元素,禁止改成 block 或 flex 容器(会破坏读屏流)
- 字体建议维持
font-family: monospace,避免不同键宽不一致(比如 Esc 和 Q 对不齐) - 高对比度模式下背景色可能被强制覆盖,所以文字颜色与背景的对比度必须 ≥ 4.5:1(如 #333 文字配 #f0f0f0 背景)
修饰键(Ctrl、⇧、⌥)和字符键(S、F5)在视觉上可区分,但绝不能靠嵌套或 class 改变其语义层级——那是 JS 监听和 aria-keyshortcuts 的事,不是 的职责。


















