<kbd>需显式设置背景、边框、圆角和内边距以增强视觉辨识度，组合键须分标签包裹并用普通文本连接符，macOS用⌘符号，禁用aria-keyshortcuts及tabindex，确保触控热区、颜色对比度与焦点样式满足可访问性底线。
为什么直接用 <kbd> 在文档里几乎看不见
浏览器对 <kbd> 的默认样式只设了 font-family: monospace，没背景、没边框、没内边距——在多数 CSS 重置或现代 UI 框架（如 Tailwind、Bootstrap）里，它会直接退化成普通等宽文字，和 <code> 几乎无法区分。用户扫读时根本注意不到这是快捷键，更别说理解操作意图。
- 必须显式设置
background-color（推荐#f0f0f0或#f5f5f5），否则视觉无“按键感” - 必须加
border: 1px solid #ccc和border-radius: 4px，否则缺乏物理按键轮廓 - 必须设
padding: 2px 6px（或0.1em 0.4em），小字号下文字贴边会糊成一团 - 别依赖
line-height单独撑高——<kbd>是行内元素，要靠vertical-align: middle对齐周围文本
组合键写法：分键包裹 + 外部连接符，不是塞进一个 <kbd>
写成 <kbd>Ctrl+S</kbd> 看似省事，实则语义断裂：屏幕阅读器会读作 “C T R plus S”，而非 “Control S”；也无法单独给 Ctrl 加修饰键样式（比如浅灰底+粗体），更难适配 macOS 的 ⌘ 符号替换逻辑。
- 正确结构：
<p>保存：<kbd>Ctrl</kbd> + <kbd>S</kbd></p>，加号是普通文本，不在任何标签内 - macOS 场景用 Unicode 符号：
<kbd>⌘</kbd> + <kbd>S</kbd>（U+2318），不要写<kbd>Cmd</kbd> - 避免嵌套：
<kbd><kbd>Ctrl</kbd><kbd>S</kbd></kbd>虽符合旧 W3C 建议，但现代浏览器解析不一致，且增加 DOM 复杂度 - 功能键统一大写：
<kbd>Esc</kbd>、<kbd>Enter</kbd>、<kbd>Tab</kbd>，不用return或↵
跨平台快捷键并列展示时，别用斜杠混淆语义
写 <kbd>Ctrl / Cmd</kbd> + <kbd>S</kbd> 是典型错误：斜杠不是按键，也不是平台分隔符，它会让屏幕阅读器卡顿，CSS 也无法针对性地隐藏某一边。静态文档应明确区分用户平台，而不是把两个逻辑塞进同一视觉单元。
- 推荐并列结构：
<p>Windows/Linux：<kbd>Ctrl</kbd> + <kbd>S</kbd>｜macOS：<kbd>⌘</kbd> + <kbd>S</kbd></p> - 如果必须紧凑排版，用
<span class="platform-win"><kbd>Ctrl</kbd></span>+<span class="platform-mac"><kbd>⌘</kbd></span>配合 CSS 切换显示，比斜杠可靠 - 禁用
aria-keyshortcuts在<kbd>上——它只该出现在可交互元素（如<button>）上，否则会误导辅助技术 - 别给
<kbd>加tabindex或outline：它本不可聚焦，强行添加会破坏键盘导航流
响应式与可访问性最容易被跳过的三件事
很多团队加完基础样式就收工，结果在 iPad 上按键挤成一串，在色弱模式下键帽全变灰，或者 VoiceOver 用户听到一串字母却不知是哪个键——这些不是“锦上添花”，而是底线。
立即学习“前端免费学习笔记（深入）”；
- 最小点击热区：设
min-width: 24px，配合padding保证触控友好，尤其在移动端 - 颜色对比度必须 ≥ 4.5:1：
color: #333在background: #f5f5f5上达标，#000on#fff反而眩光 - 保留
:focus样式（哪怕只是outline: 2px solid #007aff），否则键盘用户无法确认当前焦点落在哪组快捷键上 - 禁止纯靠颜色表达含义：比如用红框标“危险快捷键”，必须同步加文字标注（如
<kbd class="danger">Alt</kbd> + <kbd class="danger">F4</kbd> <span class="sr-only">（强制关闭）</span>）
<kbd> 在不同设备、不同辅助工具、不同缩放比例下，都准确传达“这是一个你该按下的物理键”——样式可以微调，语义和可访问性不能妥协。 
