HTML Guides for pre

A <pre> element has the implicit role generic, which can't have an accessible name, so aria-label on a plain <pre> is an error.

The ARIA specification prohibits names on the roles listed in the message. Screen readers ignore a name set on any of them, so the label never reaches the user. A <pre> without a role attribute counts as generic, and the validator rejects its aria-label until the element has a role from outside that list.

The fix depends on what the <pre> holds. ASCII art and text diagrams are pictures made of characters, and a screen reader reads them out one symbol at a time. Add role="img" so the aria-label replaces that string of symbols with a description. Don't do this for code: the img role hides the element's text, and screen reader users would hear the label instead of the code.

For a code block, a visible caption helps sighted readers too. Wrap the <pre> in a <figure>, put the description in a <figcaption>, and remove the aria-label. If the code block scrolls and has tabindex="0" so keyboard users can scroll it, role="region" gives that focus stop a name and makes the aria-label valid.

Invalid example

<pre aria-label="A cup of coffee drawn with text characters">

( (

) )

........

| |]

\ /

`----'

</pre>

<pre aria-label="Calculating the order total"><code>const total = price * quantity;</code></pre>

Valid example

<pre role="img" aria-label="A cup of coffee drawn with text characters">

( (

) )

........

| |]

\ /

`----'

</pre>

<figure>

<figcaption>Calculating the order total</figcaption>

<pre><code>const total = price * quantity;</code></pre>

</figure>