How to access alt text on Twitter (for people who aren’t used to doing so)

I tweet often about alt text for images and gifs, how important it is for accessibility, and how truly simple it is to add it into platforms like Twitter. However, while adding it is pretty straight-forward, accessing it is another matter altogether. For some mysterious reason, it’s as if Twitter really didn’t want you to access it at all!

Photo (sans alt text) by Phillip Larking on Unsplash. Come to think of it, my images in Medium posts have alt text, but like with Twitter, I have NO idea of how most people would access it. The code extensions and code-examining approach from further down would help here.

Even if you don’t need it, you might want to see or hear (more on that in a moment) alt text for a variety of reasons: to learn from your fellow users as you add alt text to your own images, to better make sense of an image you just can’t understand, because you’re on a slow data connection that won’t load photos, or even — like me — because you’ve vouched not to retweet any content that doesn’t include alt text, so you need to make sure it’s included. Let me tell you what works for me!

A quick index so you can jump ahead if you want to:

1. Alt text on iPhone (no other phones, sorry, I can only write what I know)
2. Alt text on desktop: read aloud
3. Alt text on desktop: quick browser extensions
4. Alt text on desktop: this sounds scary but I swear it’s easy, fast, and (importantly) customizable, truly THE golden standard: CSS scripts! ✨
5. Alt text on desktop: examining the source code
6. Alt text anywhere: accounts you can tag

Let’s go!

1. Alt text on iPhone

(I would be thrilled to add details about smartphones with different operating systems but I only have an iPhone, let me know if you have insight!)

The short version on iPhone: there are two primary ways, VoiceOver and javascript. Unfortunately, the way iPhones work, you can’t install any browser extensions, custom scripts or anything else. Someone could make a Twitter app that looks exactly the same as the real one but displaying alt text, I guess, but Twitter probably wouldn’t like that.

Read aloud on the app or your preferred browser via VoiceOver

So this is through your iPhone’s native VoiceOver settings, what most blind users would activate in their phone. It has two big advantages over even the best browser extensions: it works on all sites and apps, and you’re getting the same experience as blind iPhone users.

You could always turn VoiceOver on always, but that changes your phone’s navigation, it means it will read you everything, and honestly it just takes longer to use your phone like that. So, let’s make it so you can quickly toggle it on and off:

1. Head on over to Settings → Accessibility → Accessibility Shortcut
2. Click on “VoiceOver.” You can click on more things if you want!
3. (If you want, you can head to Settings → Accessibility → VoiceOver and tweak the settings. I have mine slightly sped up.)
4. You can now triple-click the home button to turn VoiceOver on and off. If you only selected one option in step 2, it will turn on and off simply by triple-clicking. If you selected more than one, a menu will come up so you can select VoiceOver and, to turn it off, you will have to triple-click, tap on “VoiceOver” so it has a border around it, then double-tap the option.

You can also ask Siri to turn VoiceOver on and off, but I think the triple-tap is easier! Now, once you have VoiceOver on, you can tap on images, text, or anything else in your phone. On Twitter, if something doesn’t have alt text, it will simply say “Image,” “vertical,” or “horizontal.” I don’t know the logic there.

I personally have one medium problem with VoiceOver: I’m plurilingual and so is my Twitter feed, but my phone is monolingual in Spanish. If, for example, I encounter a tweet in English, my phone will pronounce all the letters as it would pronounce them in Spanish, which requires some language logic in order to understand what the alt text even said. Since I don’t actually rely on alt text, this is ok for me.

Display text via Safari + javascript

I found this workaround here but it’s honestly more comfortable for me to go the VoiceOver way, even considering the language thing.

In short: you want to bookmark the code below in Safari. If you have a Mac, you can select the text and drag it to the Safari bookmarks toolbar, then syncing. If you don’t have a Mac (like me), you’ll need to go to Safari and bookmark any site: Safari will let you change the title (I suggest “AltText”) but not the URL when you first make a bookmark, so go ahead and save, then edit, change the URL to the code, and save.

javascript:for(var%20imCt=0;document.images%5BimCt%5D;imCt++)%7Bvoid(document.images%5BimCt%5D.onclick=function%20()%20%7Bif(this.title)%7Bif((window.brbanta=prompt(‘Image%20title%20text:%5Cn(Click%20OK%20to%20insert%20this%20text%20before%20the%20image)’,this.title))&&this.parentNode)%7Bthis.parentNode.insertBefore(document.createTextNode(‘%20’+brbanta+’%20'),this);%7D%7Delse%20if(this.alt)%7Bif((window.brbanta=prompt(‘Image%20alt%20text:%5Cn(Click%20OK%20to%20insert%20this%20text%20before%20the%20image)’,this.alt))&&this.parentNode)%7Bthis.parentNode.insertBefore(document.createTextNode(‘%20’+brbanta+’%20'),this);%7D%7D%20else%20%7Balert(‘There%20is%20no%20title%20or%20alt%20text%20for%20this%20image’);%7D%7D);%7D

Now, click on the image you’re interested in checking the alt text for, open the bookmark in the same window (it will look like nothing happened) and tap on the image: you should see a box like this. From here, you can either scroll manually to read the whole thing or copy it all and, for example, paste it into notepad.

If, like me, you have vowed to not RT tweets without alt text, this javascript could work to quickly find out if there’s alt text present, even if you can’t easily read it all.

2. Alt text on desktop: read aloud

I mentioned NVDA in a previous post: it’s a free screen reader, although you can (and should) definitely donate to support them! The software is available in several languages, and it supposedly does some magical language-detection thing as it reads sites but, in my experience, I have the same plurilingual issues with NVDA as I do with VoiceOver. This isn’t the software’s fault, it’s really about how sites are coded and how computers interpret letters.

This is a good option if you want to experience Twitter how (some) blind users do!

3. Alt text on desktop: quick browser extensions

I’ve tried out a lot of different extensions for both Chrome and Firefox. Some are available in several browsers.

First off, speaking of extensions, let me plug Twitter Required Alt Text (Chrome, Firefox). It’s one of the best extensions you can get if you’re trying to be consistent about including alt text. It’s very simple: if you include images in your tweet but don’t describe them (that includes gifs), the “Tweet” button goes red, tells you to add alt text, and literally does not let you tweet until you do. A+++, brilliant extension, I couldn’t love it any more than I already do.

Ok, now that I’ve plugged this marvelous extension for adding alt text, let’s get back to the ones for reading it.

Imagus (Chrome, Firefox)

Imagus isn’t actually intended as an alt text extension, but it incidentally has the capability. It’s really designed to show images and video on mouse hover. For example, if you hover over a video thumbnail it will play it in a bigger resolution, and if you click the “next” button in some webcomics it will show you the next page.

However, if you head on over to the extension settings, you’ll see there’s an option to turn on “captions” which are really the alt text.

There are a couple of extra options if you click on advanced over on the right, but nothing too fancy. Remember, this wasn’t designed FOR alt text.

I honestly use Imagus for the zoom feature but it’s rad to have alt text bundled in, and it’s it was how I accessed alt text for months before switching to my current setup (more on that in the CSS section).

Imagus sometimes fails and I have no idea of what the problem is. There are certain images that it just won’t display the alt text for, even though it’s there. Since Imagus doesn’t display any message or sign when something doesn’t have alt text, you need to always be aware that there could be false negatives. If this is your principal alt text access point (it was mine for a long time!), get a backup.

Alt Text Tester (Chrome)

This was my backup when I had Imagus installed. It’s a little obnoxious because it’s not designed for this exact purpose, it’s for website designers to make sure all their images are described. So, upon activating it (on my hydrangeas tweet), you get a URL list like this of all images without alt text.

The 10 URLs are actually just three (my profile picture, big and small, along with the one hydrangea photo with no alt), but many times over.

If you hover over an image with alt, it shows you the alt text in green. If you hover over some images with no alt, it reads “Alt Text Missing” in red. But Twitter is a weird, weird place, so if you hover over an image with no alt within a tweet, it will interpret that placeholder “Image” text as alt and display it in green.

Another downside: after you activate Alt Text Tester, even if you X out, you’ll have issues clicking through image links and you’ll have to reload the page. So, after activating it for these screenshots, I wasn’t able to click normally for the Twitter photo viewer. Very small quip, but there it is.

Image Alt Text Viewer (Chrome)

There’s a Spanish expression that translates to “killing flies with cannons” that just means something is overkill. This extension, for the purpose of viewing Twitter alt text, is definitely killing flies with cannons. It’s an easy toggle on/off, and it will display all of this. Again, useful if you’re making a website, but not really what we’re looking for right now.

Auto Alt Text (for Chrome, it’s so bad I’m not even linking)

Honestly, this extension is designed to generate alt text from images without alt text, which it can read aloud or display on-screen. It’s pretty bad at doing that job, and it even insists on generating it when an image already has alt text written by a human. I clicked on the photo with alt text and it rendered “a closeup of a flower in a vase” which is sort of okay (if also very wrong), but I have literally seen it describe photos of people as spiderwebs and similar things. Don’t even bother. Really. Just skip it altogether.

4. Alt text on desktop: CSS scripts! ✨ Truly the way to go. Follow me!

I know, I know, this sounds scary. I’m going to walk you through it! First, the screenshots. In my current setup, I can easily toggle two scripts on and off. Script 1 places a big red border around images with no alt text, like so:

The second part makes it so images don’t display at all, only the alt text. If there’s no alt text, the word “Image” appears. I gather it will display in whichever language you have Twitter set to.

Yes, it’s true that the tweets on the left, with the alt text, have a little “ALT” note on the bottom left. Do not be fooled, for some ridiculous reason that tag only appears on your own tweets but not on other people’s. It’s a useless feature.

I usually have both of these toggled on, so if an image doesn’t have alt text it both reads “Image” and has the red frame. If you want to see the images, you can either toggle the scripts off (two clicks) or simply click on the space where the image should be, which will open it in Twitter’s image viewer like normal.

(A (small) warning: due to Twitter’s shenanigans, these codes will affect regular images but not videos, gifs, or images attached to external sites (like the preview image that appears on its own when you link to a newspaper). I tried to make it work with gifs but there’s simply no way I could figure out.)

Okay, so that looks great, how do you make it happen?

(This list is bulleted and not numbered because Medium hates us and won’t let me add images mid-list)

• Install the extension Stylus (Chrome, Firefox, Opera). This extension essentially allows you to add custom CSS code to websites as you see fit. For example, you could write a simple code that makes all sites display in Times New Roman.
• Click on the extension icon in your browser. Notice how I have three options, “onlyalt,” “warningnoalt,” and “banner,” with checkboxes by them? This is how you’d toggle your scripts on and off. However, the first time you use it there will be no scripts, you have to create them! So head on over to “Manage.”

• Now click on this (actually hard to see) “Write new style” button.

• Now I’m going to give you my scripts. Ready? Since the tabulations are important and Medium is evil, I’m sharing them through pastebin. Pastebin is a site that does what it says on the tin, it’s designed for people to paste code into documents and share them. Just head on over and copy the code.

1. Script 1: Just the red border (which I titled “warningnoalt” for myself)
2. Script 2: No images, displays only alt (which I titled “onlyalt” for myself)

(Now, I say “my” codes, but the red border belongs entirely to .@lunasorcery and the only alt is a frankenstein of her codes. Please see this thread of hers for more!)

• You can either create these scripts as two separate scripts or join them into one single script; I recommend you create two if you want to toggle them off/on independently. Either way, copy the text to the “code” area (1 in the image below), give your script a name you’ll understand for toggling on/off (2), then click “Save” (3) and “Back to manage” (4). I’m sure the rest of the settings do cool things but honestly you don’t even need them.

• You’re done! You can now enable/disable these codes as you wish. These are programmed for Twitter only, not necessarily on purpose but rather because Twitter has weird code and these scripts address it specifically.
• As I said above, these codes are actually all thanks to .@lunasorcery and she has one more, which I don’t actually use but you might like. It overlays an alt text banner over images that do have alt text and it looks like this. I’ve put the code in my pastebin as well and it can be found here. Keep in mind that this banner will take up more and more space the more alt text there is, so in some cases it will cover the image completely and you’ll still need to either toggle it off or click the image for the full viewer.

Just to close this CSS section, these codes are totally customizable and you can change the color and weight of the warning border, or the text font or size of the alt text, or the color of the banner overlay, or… Twitter is your oyster!

5. Alt text on desktop: examining the source code

If you self-taught HTML in the 90s by examining source code like I did, good job, you already know how to do this, feel free to skip ahead.

Ok, let’s talk about websites really quick. Websites, like computer programs, may look super pretty but are really just lines of code. This code isn’t secret, it’s right there for your computer to read and interpret it. You can do so too, but you need to know where to look and what it does. Let’s take a look.

Firefox

Let’s say we want to see the alt text for the hydrangeas in this tweet. You right-click the image and you find a menu much like this one, although you might have some slightly different options depending on extensions and settings. We’re interested in two options: “Inspect Accessibility Properties” or “Inspect.”

Honestly “Inspect Accessibility Properties” is the absolute winner here because it will take us here, which displays the alt text straight away.

(The alt text is in the pink font in the bottom center of the image)

In case the text is too long to fit in this space, you can right-click the alt text, click the only option (to me) of “Print to JSON,” and that will take you to a larger version of this page, where you can read the full thing and see all the naughty details about my image (like its URL and margin?).

The alt text is in the very first pink line, all the way at the top. The rest are the naughty bits 👀

If, instead, you click only on “Inspect,” you’ll get this view. The alt is also there, look! It’s just in HTML so it might take a little more comfort with programming languages. But look, it’s in the blue-selected section (which is selected by default).

Chrome

I’m not sure of why my Chrome is set to Spanish, but it works just the same way. Click “Inspect” at the bottom of the menu…

… and it also appears right here, as HTML.

Again, Firefox’s “Inspect Accessibility Properties” is the clear winner out of Chrome/Firefox. You should be able to see the HTML on whichever browser you use, but some (like Firefox) might have options to see it better.

6. Alt text anywhere: accounts you can tag

There are several useful bot accounts out there that will tweet the alt text to you. For example, if you tag .@get_altText (sorry about the period there, medium is weird) as a response to a tweet with images, it will either reply “There is no alt text for this image, I’m sorry.” (which may be useful if your intention is to gently nudge someone to add alt to their tweets) or fire off the alt text in as many tweets as necessary to fit it all (example here). These bots can be a great tool to raise awareness about alt text, but they have too many steps if you want to see ALL the alt text in your TL.

In Conclusion

It’s absolutely outrageous that Twitter would allow users to add alt text to their images (as they should!) but also make it this hard for us to see that alt text afterward. Having easy access to the alt could help raise awareness and help us learn from each other as we read other people’s descriptions and figure out better ways to describe our images.

Incidentally, there is no way to describe videos so both Deaf and blind people can miss out on video content and if you add closed captions (that can be toggled on and off) rather than open captions (embedded in the image) to your video those captions will not render on the Twitter app even if you have all your accessibility settings enabled! Also, their audio tweets are actually videos with your profile pic as the visual, but there’s no way to caption them either. Twitter is a flippin DISASTER.

However, there are ways to get around Twitter’s nonsense of a page. If I wasn’t clear enough, I think Stylus + those CSS codes are the best way to go, even for beginners, but I’ve shared other approaches too so you’ll hopefully find the one that works best for you.

As I’ve mentioned a few times, I’m just figuring this out as I go along and also I don’t have every device or even browser in the world, so if you have more resources to add, please sound off in the comments and I’ll add it in (with attribution, of course)!

PS, I have tweeted the images with and without alt text so you can test these various tools out! Here’s the tweet with alt text, and here’s the tweet without alt text.

PPS, yes, you should add alt text even to decorative images and images that have the same exact content as the tweet. Screen reader users have no way to tell that this “Image” is unimportant! You can simply write “decorative image” or “image with the same info as the tweet.” 💜