HTML check: The “aria-label” attribute must not be specified on any “pre” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

About This HTML Issue

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>