The “tl;dr” (“too long; didn’t read”): if you just want to know how to make text art accessible, just scroll down to the heading “How to make text art accessible”. If you want to know how to check for image descriptions on twitter, scroll down to heading “How to use image descriptions on Twitter”. But if you want to understand why this matters to me, read on!
I haven’t posted (here) a lot of the details but a few months ago I finally had to learn to really use the screen reader (VoiceOver) on my phone (iPhone). That’s because my vision, which has since been partly corrected with surgery in one eye, had gotten so bad that I couldn’t really read anything on my phone reliably, even when zoomed a lot. I’d been previously using it more for comfort and convenience to read, for example, a long article.
I also spend a lot of time on twitter and while I had previously learned that it was painful how often images of largely textual or graphical data get shared that I just couldn’t read, thus missing part of the point someone might be making, I hadn’t had to deal with the incredibly annoyance of text art with a screen reader. A recent text art meme you may have seen:
When I started using VoiceOver nearly full time on my phone, text art became one of those things that just annoyed. It’s not like it mattered if I got the message. It was obvious when it was text art, especially since I could still see the general structure of things on my screen. I could just single-finger-swipe-right (an iOS VoiceOver gesture) and move onto the next tweet. But it grated. Text art is particularly long-winded typically since it’s made with Unicode characters often not in the English range (and most tweets I see are in English) and often characters that don’t have a short pronunciation. The above tweet, for example, contains a number of fairly verbosely named characters with no shorter pronunciation:
- U+250F (pdf): “BOX DRAWINGS HEAVY DOWN AND RIGHT”
- U+2501: “BOX DRAWINGS HEAVY HORIZONTAL”
Those characters repeat over and over. VoiceOver helpfully reads them all because for all it knows I am proofreading or doing some task that requires me knowing exactly what punctuation is on screen. iOS has gotten better about some of this and you can configure it to contextually not be as verbose, but it’s not perfect and I haven’t fully configured mine.
Worse, I also have Japanese enabled on my phone because I can read some Japanese and like being exposed to it. VoiceOver will, however, helpfully switch to reading text art in Japanese if it hits a character it considers to be in Japanese and then swap back when it gets to an unambiguously English character. I can’t understand Japanese descriptions of punctuation or weird characters really at all so it’s just pleasant but verbose noise.
Anyway, the above tweet at 60% speed setting (how fast VoiceOver speaks) takes more than 30 seconds – how long I don’t actually know because I couldn’t make myself left it finish. When I was using VoiceOver full time, I only listened to text art tweets if I hit one that sounded particularly musical by happenstance due to the combination of oddball unicode characters plus triggering non-English speech. Beauty in ugliness!
But in practice they are just annoying and a little reminder that no one is considering that I (and people like me) might exist.
If that’s not enough reason to start making your text art accessible, keep in mind that not everyone even uses the same text sizes on their phones or their desktop, so your clever text art might end up just looking like gibberish. Here’s another “2020” meme but how it looked on my phone with text size turned way up:
Even someone who isn’t particularly vision impaired but just has a little bigger text size might just get something distorted enough that they might wonder why you surrounded your message in a bunch of noise!
How to make text art accessible
Fortunately, there’s an easy way for you to not inadvertently cause someone you don’t know annoyance! You can even still share clever text art!
- Make your text art.
- Take a screenshot of it.
- Post the image to social media with an image description or alt text.
Note: “image description” is really just the general term that includes specifically “alt text” which is the name for the HTML way of doing it (and what Twitter is using on the web). Note only does alt text make your images more understandable to more peopler, it also improves your search engine rankings! So you should use them anywhere you’re posting images!
Twitter provides an explicit way for users to make tweets with images that have alt text which is a little “add description” button after you’ve added an image. On other platforms you might have to just add the description in the text part of a post. I’ve seen a convention in the latter case of putting text in square brackets like this: “[Image: Screenshot of <important message> with text art displaying 2020 around it]”. But anything that calls out that it’s describing an image works!
What makes a good image description? There are a lot of guides online about how to do that (including the links in step #3 above). But the important part is that you should think about what message you are conveying with an image (whatever kind of image it is) and make sure that information is up front in the description. If you post a picture about how cute it is that your cat has their paws on their face, then you want to say that in the description right away and not preface it with a long description of your couch, how messy it is, what color the curtains and rugs are, etc.
How to use image descriptions on Twitter
Unfortunately to add image descriptions to your images on Twitter, you have to enable support for it. Twitter help has instructions.
But what if you see a tweet you really want to share made by someone else and want to make sure it has a description? Sadly, I don’t know of good ways to do that on iPhone (and I expect other mobile phones) without turning on a screen reader. None of the Twitter apps I’ve used on my iPhone have a way of viewing a tweet’s image descriptions (or lack thereof) built into the app for use by sighted users. On a desktop browser like Chrome or Firefox, you can check using tools built into the browser. Typically you would right click on the image and click “inspect” or “inspect element”. It should open a window that highlights text something like this:
<img alt="some cool description!" ...>
But describing that is getting kind of into the weeds. I suggest “how to check for alt text” or similar web searches if you go this route.
How to use VoiceOver (or other phone screen reader) to check!
If you happen to have an iPhone, here are some instructions for quickly getting into VoiceOver, checking an image and turning it off. I can’t help much with other phones, but all the major phone types have at least a basic screen reader these days.
On an iPhone:
- Enable “quick” access to accessibility tools. Go into Settings and search for “accessibility shortcut“. This brings up a list of accessibility tools that you can check one or more of via “triple clicking” on the power button (or on older iPhones the home button).
- But don’t enable VoiceOver just yet! Go to the tweet that you want to check. Now triple click to enable VoiceOver. It will start talking at you. Don’t panic!
- Touch the image you want to know about with a single finger one time (and lift). It should read you the image description if it has one. If it doesn’t it will maybe read you some generic things that the phone can figure out about it, like where the image is, maybe the phrase “possible text” if it words in it. Whatever you hear, if it sounds like it usefully describes the image, then you’re good!
- Triple click the home button and turn off VoiceOver! VoiceOver can be very overwhelming when you’re first learning it so unless you want to learn more, I understand wanting to turn it off ASAP.
What if the image doesn’t have a description? My personal practice is to quote tweet and type one up myself! That’s always an option if you aren’t sure and don’t have a good way to check.
Have fun making the internet better for everyone!
Fancy Beans 