• Success Criterion 1.1.1
  • Conformance level A
  • W3C reference F72

ASCII Art With No Text Description for Screen Readers

1.1.1 — Non-text Content

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

ASCII art (pictures drawn with characters) has no text alternative — screen readers read out streams of random punctuation.

Example 

<pre>
 /_/
( o.o )
 > ^ <
</pre>
<p>Now playing: Cat Café Lo-fi</p>

Why it matters

A listener browsing playlists by screen reader hears a stream of punctuation read one symbol at a time for every ASCII mascot, before ever reaching the playlist name.

How to test

Select any ASCII-art block (made of characters like /, , |, *) and check for a nearby text description or aria-hidden wrapper — absence of either fails.

How to fix

Hide purely decorative ASCII art from assistive tech, and state any real meaning in nearby text.

<pre aria-hidden="true">
 /_/
( o.o )
 > ^ <
</pre>
<p>Now playing: Cat Café Lo-fi <span class="visually-hidden">(cat mascot playlist)</span></p>

Outcome

A listener scrolls through playlists and hears only the playlist names, reaching the one they want in seconds.

Who is affected

Screen reader users browsing visually-themed playlist lists are slowed down by every decorative block that isn't hidden.

Learn more

Related scenarios