Making ASCII Art Accessable?

Help
1

ASCII art is a staple of early web and something I want to play with at some point. However, I also know screen readers struggle with such “graphics” (for lack of a better term), reading each individual character out loud. For larger works, this could take a while, even with the high speeds screen readers normally go at.

I also think ASCII art tends to struggle with responsiveness? But I’m less certain of there being a solution to that.

What’s the best way to add alt text to ASCII? What do I use, and how should I use those elements? And is there any way to make ASCII art responsive or is that in particular a hopeless cause?

2

Probably the only right way is converting ASCII art to PNG and adding alt text the usual way.

1 Like
3

Turning it into an image also helps with responsiveness, but if you want to keep the text I think examples 3 or 4 from H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak | WAI | W3C would work for you. (I’ve seen them recommended before, but they might need testing with various screen readers to confirm - as a general note, techniques are ideal scenarios, and not always supported.)

I like the first option, personally. role="img" on a container, then an aria label that serves as the text alternative. To a screen reader user, it should be equivalent to any other image. :slightly_smiling_face:

3 Likes
4

If you want to display blocks of decorative ASCII art without transforming the block into an image, an easy way to tackle the issue would be to just make sure the ASCII art text block is invisible to screen readers altogether.

Just add

aria-hidden="true"

to whatever div/span/pre is wrapped around the block. It’ll still be visible, but assistive tech will pass over it. If you want there to be alt text (so to speak) for screen readers in its place, wrap that block around another:

<div aria-label="ASCII art">

So in the end, you’d have something like:

<div aria-label="ASCII art">
    <pre aria-hidden="true">
        --- ASCII art here. ---
    </pre>
</div>

Now, the screen reader will say “ASCII art” (or whatever else you put in the “aria-label” field), without bellowing the symbols being used to put the image together.

Is it the right way to do it? No idea, but it is a way to do it, and it’s typically how I handle ASCII art and other assorted weird-character-word edge cases on my end.

1 Like
5

Do screen readers pick that up? Aria label isn’t supported for divs - they have role presentation/none, which is why I recommended an img role.

6

Behavior will vary across screen readers, but aria-label is supported for divs.

7

veronica lewis, a low-vision blogger with a lot of helpful guides about writing alt text, recommends replacing it with an image with alt text!

3 Likes
8

Aria-label is prohibited for generic elements according to ARIA specifications: Accessible Rich Internet Applications (WAI-ARIA) 1.2

It might work depending on screen reader/browser combination, but I still would recommend an img role and aria-label instead. It’s more semantically accurate and supported by the specs.

2 Likes
9

Yeah, this is a good option (and on social media, the only option!).