# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<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

```html
<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>
```
