loading...
Cover image for Adding alternative text on Twitter images

Adding alternative text on Twitter images

alvaromontoro profile image Alvaro Montoro ・2 min read

In Twitter, you might have seen people who add a description to images within the tweet to make them "accessible." This is a nice thing to do, but it takes space that you could need for the tweet. Wouldn't it be nice if there was a better way?

The good news is... there is! You can add alternative text to your images on Twitter. Thanks to @tammalee that shared this tip with us online.

It is a little bit tricky, as you need to activate some settings, but once it is done, you will be able to write more accessible tweets and you will have more text to write. A win-win.

It is a two step-process that can be found on the Twitter documentation (although named "image descriptions", and with no reference to "alternative text" that would make it more intuitive IMHO.)

Activating images description on Twitter

This first step needs to be completed just once. And when the option is activated, you will be able to add alternative text to images. Let's see it step by step:

First click on the "More options" menu on the left side nav (the one with the three dots):

Twitter's left menu navigation with highlighted "More options"

After that, select the "Privacy and Settings" option:

More options menu open

And inside this one, click on the "Accessibility" submenu and check the "Compose image descriptions" checkbox:

Twitter Accessibility configuration with highlights

...And that's it!

As mentioned above, this step only needs to be completed once, and it will automatically propagate to your account in different devices (e.g. I activated it on the web browser, and it was automatically activated on the mobile app when I opened it later.)

Adding alternative text

Once the setting is active, you can start adding alternative text to images. Draft your tweet as you would normally do, and add an image. You will see that there's an "Add description" link at the bottom:

Composing a tweet with the Add description link at the bottom

Click on it, and a pop-up with a textarea will show. One nice thing is that the alternative text can have up to 420 characters, which is almost double the content of an actual tweet.

Pop-up for adding alternative text in the textarea

Press the "Done" button and finish your tweet (you can see the description for each image at the bottom). After publishing it, you can inspect the image and see the alternative text right there:

Code inspect of a tweet with alternative text


This same setting can be activated on the mobile app following the same steps (although the screenshots will change a little). In the end, you'll get your images and a button on them to "Add description":

Adding alternative text to images on the Twitter mobile app

Posted on by:

alvaromontoro profile

Alvaro Montoro

@alvaromontoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Active moderator in Stack Overflow en Español. Husband, Father, Longhorn 🤘

Discussion

markdown guide
 

That's a neat trick. Thanks for sharing! I've seen something similar when posting images on LinkedIn and I immediately though about it when reading your article. Nice to see that the web a11y is getting more and more adopted.

 

It makes me mad that this isn't the default, and in fact that it doesn't warn you when you try to post without supplying a description.
Mastodon has it right, though.

 

Is it possible to make the images slightly smaller on DEV? Especially the vertical ones take too much space.