<kbd>标签专用于标记真实物理按键，须单键独立封装、禁用连接符，组合键需嵌套表达，跨平台键名应分写并用标签外符号分隔，样式须满足WCAG对比度且兼容高对比模式。
标签不是“按键样式工具”，而是告诉浏览器和屏幕阅读器：“这段文字代表用户要亲手按下的物理键”。用对了，文档才真正可读、可访问、可被搜索引擎理解。
只包裹真实按键，不包解释性内容
语义正确的前提是：每个 只封装一个可独立按下的键名或符号，不含空格、加号、箭头、括号或操作说明。
- ✅ 正确：
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存</p> - ❌ 错误：
<kbd>Ctrl + S</kbd>（加号塞进标签内，语义断裂，屏幕阅读器读作“Control Plus S”，而非“Control plus S”） - ❌ 错误：
<kbd>点击「保存」</kbd>（这是鼠标动作，不属于键盘输入语义） - ❌ 错误：
<kbd>npm install</kbd>（这是命令行指令，该用标签）</li> </ul> <H3>组合键必须嵌套表达逻辑层级</H3> <p>W3C 明确建议：用外层 <kbd> 包裹一组内层 <kbd>，来表明“这是一个快捷键序列”，而非多个并列按键。这直接影响屏幕阅读器的朗读节奏与辅助技术的理解。</p> <ul> <li>✅ 正确：<code><kbd><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Esc</kbd></kbd>
（外层表示“组合操作”，内层各为独立按键） - ✅ 正确：
<kbd><kbd>Cmd</kbd><kbd>Q</kbd></kbd>（macOS 平台典型退出快捷键） - ❌ 错误：
<kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Esc</kbd>（缺少外层包裹，语义上等同于“按三个键”，而非“按一个组合键”）
跨平台提示需分写、斜杠/分隔符放标签外
不同系统修饰键名称不同（Cmd vs Ctrl），但不能把平台差异塞进单个 里。应分别包裹，并用纯文本分隔符连接，确保每个键名仍保持独立语义。
- ✅ 正确：
<p>刷新页面：<kbd>Cmd</kbd> / <kbd>Ctrl</kbd> + <kbd>R</kbd></p> - ✅ 正确：
<p>切换窗口：<kbd>Alt</kbd> + <kbd>Tab</kbd></p> - ❌ 错误：
<kbd>Cmd/Ctrl + R</kbd>（斜杠和加号混入标签，破坏语义与可样式化能力） - ⚠️ 注意：Space 表示空格键，不是空格字符；Enter 不写作 ↵（除非明确使用 Unicode 符号且已做实体转义）
样式与可访问性必须同步考虑
默认 无视觉样式，仅靠字体暗示。实际项目中需手动定义 CSS，但所有设计决策都要服务于 WCAG AA 对比度、高对比度模式兼容性及残障用户强制配色支持。
- 背景与文字色需满足至少 4.5:1 对比度（如 #333 on #f2f2f2 是合格的）
- 禁用 background-image 或渐变——强制颜色模式下会失效
- 避免用 box-shadow 模拟“按压效果”——高对比度模式通常禁用阴影，导致按键“隐形”
- 加号、箭头等连接符应通过
::before伪元素添加，而非硬编码在 HTML 中，便于统一维护与本地化
