使 <pre> 标签更易于访问

Question

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

现在，屏幕 reader 会显示：

Here is our code [...]
import.org.whatever.i.dont.understand.this.is.too.bad etc

最好是有一个像这样的凌晨宣布：

Here is our code [...] Block of Java code [...] > import.org.whatever.i.dont.understand.this.is.too.bad etc

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

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

Answer 1

How can we do this properly?

您必须为 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;
}

使 <pre> 标签更易于访问

Make a <pre> tag more accessible

html

accessibility

semantic-markup

screen-readers

pre