<code>标签易被读屏工具忽略，主因是误用于非代码场景、CSS压制可访问性（如aria-hidden或低对比度）、嵌套不当（如包裹按钮）或缺失语义上下文（如未配<pre>或多行结构），导致语义错乱或DOM不可见。
<code> 标签本身语义明确，屏幕阅读器会自动以“代码”方式朗读内容，但实际使用中常因上下文缺失、样式压制或嵌套不当，导致可访问性失效。
为什么<code>标签容易被读屏工具忽略？
不是标签本身有问题，而是它常被错误地用在非代码场景，或被 CSS 强行“静音”：
- 用
<code>包裹按钮文字、导航项、标题等非代码内容，读屏器虽读出“代码”，但语义错乱，用户无法理解这是操作入口还是示例片段 - 全局重置
font-family或color导致文字过小、对比度不足（如浅灰字配白底），违反 WCAG 4.5:1 要求 - 父容器设了
aria-hidden="true"或role="presentation"，直接屏蔽整个<code>块 - 在
<pre><code>中混入不可聚焦的交互元素（如<span onclick>），键盘用户无法触发
如何让<code>真正可读、可操作、可定位？
关键不是改 <code> 本身，而是补全它的语义上下文和交互能力：
- 始终用
<pre><code>包裹多行代码块，单行代码可单独用<code>，但避免嵌套<div>或<p>干扰结构 - 为代码块添加
aria-label或aria-labelledby，说明语言类型与用途，例如：<pre><code aria-label="JavaScript 函数定义：用于校验邮箱格式">function isValidEmail() {...}</code></pre> - 若代码块内含可复制按钮，确保按钮有
aria-label="复制上面的代码"，且通过tabindex="0"可聚焦、Enter可触发 - 禁用
user-select: none—— 它阻止所有用户（包括键盘+辅助技术用户）选中和复制代码，属于反模式
遇到<code>在 VoiceOver/NVDA 中不朗读怎么办？
大概率是渲染层或 DOM 结构问题，优先排查这几处：
立即学习“前端免费学习笔记（深入）”；
- 检查是否在 SSR 或 hydration 后动态替换了
<code>内容但没触发aria-live，导致读屏器未感知更新；可加<div aria-live="polite" class="sr-only"></div>并手动textContent更新 - 确认
<code>没被包裹在display: none、visibility: hidden或opacity: 0的父元素中 —— 这些都会让读屏器跳过 - 避免用
contenteditable="true"改造<code>，它会破坏原生语义；如需编辑，改用<textarea spellcheck="false">并设置aria-label - Chrome DevTools 的 Accessibility 面板里查看该节点的
computed role是否仍为code；若变成generic，说明被其他属性（如role="text"）覆盖了
最易被忽略的一点：很多团队只测“代码块有没有 alt”，却忘了验证“键盘用户能否从上一个段落 Tab 进来、再 Tab 出去”——<code> 本身不可聚焦，但它所在的 <pre> 或其父 <figure> 如果没处理好 tabindex 和焦点流，就会成为键盘导航的断点。
