Alt attribute for ASCII art in HTML?

Question

This is a very (very) specific question, but would it be appropriate to use the alt attribute for a pre tag when using that to show ASCII art? It's essentially like an image (which wouldn't be intelligible using a screen reader), so using alt makes sense.

<pre alt="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

Would is be read by a screen reader? Would this be appropriate or good form?

(I could imagine other situations where this might arise, like using a typographical object to denote a particular action, such as a "home" link.)

Answer 1

The aria-label attribute exists for this purpose.

<pre aria-label="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

For more information, check out this MDN article on it.

Answer 2

You have different options to consider as screen readers are just one step in the big journey of accessibility.

1. The title attribute

The alt attribute is specific to img and area tags. For other element, you can use the title attribute which will give the use access to a tooltip in many browser implementations:

See HTML5 doc:

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be further information about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.

Warning! Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

The title attribute might be used with some conditions: using it on a targetable element (using tabindex=0) so that it can be accessed with keyboard, using javascript to show the tooltip when the browser doesn't, and giving visual clue that we can access the definition by focusing the element (underlying, question mark, ...).

2. The aria-label attribute

Many screen readers do not read by default the value of the title attribute, so you are encouraged to use the aria-label which is somehow specific to screen-readers. As people not using screen reader won't benefit of an aria-label, you have to use it in conjunction with the title attribute.

Note that you can use two different text as the title can be used as a description when aria-label is more a text replacement.

<pre aria-label="Welcome!" title="A cute little blob creature">༼ つ ◕_◕ ༽つ</pre>

3. Ignoring it.

You can also consider that this is meaningless to a screen reader, and consider it as a purely decorative text using the aria-hidden attribute.

<pre aria-hidden="true">༼ つ ◕_◕ ༽つ</pre>