使 <pre> 标记更易于访问

Question

在我们的博客中，我们展示了 <pre> 标记中的代码块，我们希望让它们更易于访问。

目前，屏幕阅读器会显示：

这是我们的代码 [...]
import.org.whatever.i.dont.understand.this.is.too.bad 等

如果有这样的小公告，那就太好了：

这是我们的代码 [...] Java 代码块 [...] > import.org.whatever.i.dont.understand.this.is.too.bad 等

让用户知道接下来会发生什么。

我们怎样才能正确地做到这一点？

Answer 1

我们怎样才能正确地做到这一点？

您必须为 Java 代码使用 HTML5 code 标记，并且由于您希望所有人（不仅是拥有屏幕阅读器的人）都可以访问您的网站，请在说明中输入 Java 一词：

Here is our Java code:
<code>import.org.whatever.i.dont.understand.this.is.too.bad</code>

Answer 2

使用<pre> 没问题。 <code> 也不错（多行示例需要自定义样式）。

要使其可访问，请添加 aria-label 和 aria-description 属性：

<pre aria-label="code sample" aria-description="Block of Java code that demonstrates how to blah blah blah.">
  import.org.whatever.now.they.understand
</pre>

这是使<code> 看起来像<pre> 的最小CSS：

code {
  display: block;
  font-family: monospace;
  white-space: pre;
}