直接写 ctrl+s 错误，因屏幕阅读器读作“c-t-r-l-plus-s”，浏览器无法识别为组合键，且旧辅助技术可能跳过；正确写法是拆分为 ctrl + s。
为什么直接写 <kbd>Ctrl+S</kbd> 是错的
这样写会让屏幕阅读器读作“C-T-R-L-plus-S”，而不是“Control plus S”；浏览器也无法识别这是组合键，语义断裂。更严重的是，部分旧版辅助技术会跳过整个 <kbd></kbd> 元素，因为它没声明任何交互意图。
必须把修饰键和主键拆成独立 <kbd></kbd>，用普通文本符号（如 + 或空格）连接：
-
<kbd>Ctrl</kbd> + <kbd>S</kbd>—— 明确分离语义，辅助技术可分别识别修饰键与执行键 -
<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>C</kbd>—— 平台差异用斜杠分隔，不嵌套 - 避免
<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>：外层<kbd></kbd>无标准语义支撑，反而干扰解析
怎样用 CSS 让 <kbd></kbd> 看起来像真实按键而不破坏可访问性
默认样式在 Chrome、Firefox、Safari 中表现不一致（有的带浅灰背景，有的只有等宽字体），纯靠浏览器默认不可靠。但美化时不能只顾视觉——高对比度模式下背景色可能被系统强制覆盖，文字必须保有足够对比度。
推荐最小可行样式（已验证跨浏览器+高对比度兼容）：
kbd {
display: inline-block;
font-family: system-ui, "Segoe UI", monospace;
font-weight: 600;
line-height: 1.4;
vertical-align: middle;
background-color: #f2f2f2;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.1em 0.4em;
white-space: nowrap;
}
关键点：
- 不用
box-shadow模拟按压效果：高对比度模式下阴影常被禁用，导致按键“消失” - 禁用
background-image或渐变：残障用户开启强制颜色后会失效 - 所有颜色值必须满足 WCAG AA 级对比度（
#333on#f2f2f2是合格的）
快捷键要真正可用，光有 <kbd></kbd> 远远不够
<kbd></kbd> 只负责“说这是个键”，不负责“按这个键能干啥”。如果旁边有个“保存”按钮，用户想按 Ctrl+S 触发它，仅靠视觉提示是无效的。
必须配合 aria-keyshortcuts 声明可交互语义：
- 给按钮加
aria-keyshortcuts="Ctrl+S"，屏幕阅读器会告知“此按钮支持 Control+S 快捷键” - 单键写全名：
aria-keyshortcuts="Escape"（不是esc或ESC） - 多个修饰键用
+连接，禁止空格："Ctrl+Shift+T"✅，"Ctrl Shift T"❌ - 该属性必须绑定到可聚焦/可操作元素上（
<button></button>、<a></a>、带role="button"的<div>） <h3>哪些地方绝对不能用 <code><kbd></kbd>它不是万能高亮工具。滥用会混淆语义，让辅助技术误判内容类型。
-
<kbd>git commit -m "init"</kbd>❌：这是命令行指令，应使用<code> -
<kbd>点击“提交”按钮</kbd>❌：“点击”是鼠标行为，非键盘输入 -
<kbd>input</kbd>元素内部包裹<kbd></kbd>❌：破坏表单语义，可能干扰软键盘唤起逻辑 - 把
<kbd></kbd>当作 UI 按钮画 SVG 或加onclick❌：它不监听事件，也不响应焦点，强行加 JS 属于语义污染
最易被忽略的一点：组合键的视觉顺序必须匹配物理按键逻辑——
<kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Del</kbd>（无加号）表示三键同时按下，而<kbd>Esc</kbd> → <kbd>Tab</kbd> → <kbd>Enter</kbd>表示明确的操作序列。这点在键盘导航教程中至关重要，但 90% 的文档都混为一谈。 -
