如何让博客中<pre>标签包裹的代码块更具可访问性？

这个问题问得好！提升代码块的可访问性确实能帮到很多依赖屏幕阅读器的用户，我来分享几个靠谱的实现方法：

核心方案：ARIA标签+语义化结构组合 #

首先要保证代码块的语义化正确，再通过ARIA属性给屏幕阅读器补充关键上下文：

• 第一步：用标准语义标签嵌套代码
  把代码放在<code>标签内，再用<pre>包裹——这是HTML规范里的标准代码块写法，既能保留代码的换行和缩进格式，又能让辅助技术识别出这是代码内容：

  <pre>
    <code>
      import org.whatever.i.dont.understand.this.is.too.bad;
      // 你的其他代码
    </code>
  </pre>
  

• 第二步：添加aria-label指定代码类型
  给<code>标签加上aria-label属性，值设置成你想让屏幕阅读器先播报的内容（比如“Java代码块”）。这样主流屏幕阅读器（VoiceOver、NVDA、JAWS等）会先读取这个标签内容，再逐行播报代码本身：

  <pre>
    <code aria-label="Java代码块">
      import org.whatever.i.dont.understand.this.is.too.bad;
      // 你的其他代码
    </code>
  </pre>
  

  测试下来，完全符合你期望的“先提示代码类型，再读代码”的效果。

备选方案：长描述用aria-describedby #

如果需要给代码块加更详细的说明（比如“这是一段用于初始化配置的Java代码块”），可以用aria-describedby关联一个视觉隐藏的描述元素：

<!-- 视觉隐藏的描述文本，仅屏幕阅读器可见 -->
<p id="code-desc" class="sr-only">这是一段用于初始化配置的Java代码块</p>

<pre>
  <code aria-describedby="code-desc">
    import org.whatever.i.dont.understand.this.is.too.bad;
    // 你的其他代码
  </code>
</pre>

这里的.sr-only是通用的视觉隐藏样式，你可以直接复用：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

小提醒 #

• 不要在<pre>前直接加可见文本（比如“Java代码块：”），除非你想让视觉用户也看到——如果只是给屏幕阅读器补充信息，ARIA属性更优雅，不会打乱页面布局。
• 确保代码本身的缩进和换行正确，<pre>会完全保留这些格式，不影响代码的可读性。

内容的提问来源于stack exchange，提问作者Zoette