Search code examples
htmlaccessibilitysemantic-markupscreen-readerspre

Make a <pre> tag more accessible

In our blog, we're showcasing blocks of code in <pre> tags and we want to make them more accessible.

For now, a screen reader would read:

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

What would be great would be to have a wee announce like:

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

so that the user knows what's going to follow.

How can we do this properly?

Solution

  • How can we do this properly?

    You have to use the HTML5 code tag for the Java code, and as you want your website to be accessible for everyone (not only people with screenreaders), type the word Java in the description:

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