Twitter persists. Even if you have moved to Mastodon, Twitter will persist. As such, we need to continue to ensure it is accessible to all users. This post gathers some tips you can and should use.
Image Alternative Text
The last few days have seen more and more folks who are not disabled users, accessibility practitioners, nor adjacent folks promoting the use of alternative text for images on Twitter. This is awesome. I have written about it before and even offered Tweets with plain text instructions.
To try to reduce friction, I am going to show how the screens look to make this all go.
Some quick notes before we get started:
- Twitter only supports alternative text for static images. You cannot add alternative text for videos or animated GIFs. You will need to use old-school techniques, such as a reply tweet, linking to a description, or describing it right in the tweet. I outline more in an old post.
- For testing purposes, I made a bookmarklet to display image alternative text in tweets, but only on the web, and it does not work so well if there is more than one image (the text gets really small).
- To help remind you in case you forget, you can also follow Please Caption!, a Twitter bot that will tweet you when you forget to add alternative text in an image tweet.
Enabling Image Alternative Text on Twitter
I will show you the web interface and an app interface. Bear in mind that these screens change over time, so if you are reading this in the future you may find that stuff is slightly different.
Web Interface
Go to the Profile and settings menu, choose Settings and privacy. From the screen that comes up, choose Accessibility at the bottom of the list (on the left). Check the box Compose image descriptions and press Save changes.
App Interface (Android)
Tap your profile pic to see the menu and choose Settings and privacy. On the next screen, choose Accessibility under the General heading. Check the box Compose image descriptions. There is no save button, so just return to your timeline.
Embedding Alternative Text in a Tweet
Remember, this is not an automatic thing. You need to add alternative text yourself. Here is the basic process now that you have enabled it.
Web Interface
When you are writing a tweet and add an image, you will see a black bar on the bottom of the image with the text Add description. Click that and then type some text on the following screen. Be sure to hit the Apply button. Warning: if you click off the Tweet modal and your tweet goes away, even though it will save your tweet text, it will have lost the alternative text you wrote. So always at least copy it into your buffer just in case.
App Interface (Android)
When you are writing a tweet and add an image, you will see a black bar on the bottom of the image with the text Add description…. Click that and then type some text on the following screen. Be sure to hit the Apply button at the top of the screen. If you do not, your text will not be saved.
If you reply to a tweet with an image, note that you have to hit the Reply button to get the option to add alternative text. If you just respond in the area under the tweet, there is no option to add alternative text.
Writing Alternative Text
On Twitter, Robot Hugs did a great job of giving some examples using a tweet thread. I have embedded some of them here.
you generally don't have to say 'image of' or 'photograph of'. Just describe what the image is conveying – what the user is intended to get out of seeing it. Some examples:
![Forecast for Toronto temperatures, showing -18 Celsius today improving to -1 Celsius by Tuesday.]()
Tweet: Don't worry TO, It's going to get better soon!!
Unhelpful description: Toronto weather forecast
Helpful description: Forecast for Toronto temperatures, showing -18 Celsius today improving to -1 Celsius by Tuesday. pic.twitter.com/wr51uIXp1F
![Photographs of featured conference speakers that are all white and male]()
Tweet: Tired of going to conferences where the speaker lineup looks like this
Unhelpful description: headshots of featured conference speakers
Helpful: 8 headshots of featured conference speakers that are all white and male
(Don't @ me, this is to demo intent) pic.twitter.com/VBNgUe4Bjz
![a blind man collides with a large pillar that interrupts a handrail going up the middle of a large staircase]()
Tweet: "U of T's new building has some accessibility issues…"
Unhelpful description: staircase with pillar in the middle
Helpful description: a blind man collides with a large pillar that interrupts a handrail going up the middle of a large staircase pic.twitter.com/PflsInHz04
![a blind man collides with a large pillar that interrupts a handrail going up the middle of a large staircase]()
charts are hard! my attempt:
tweet: We have a new prime number and it’s 23 million digits long
Description: graph showing length of known prime numbers over time, starting at under 10 digits 1588 and increasing dramatically since mid 1900s to over 10 million digits in early 2000s pic.twitter.com/iHUGSU6zbm
![tweet saying 'seriously where the the goat go' with an image showing dogs outside looking around. one dog is looking suspiciously with narrowed eyes at the picture taker.]()
trying to conveying the joke/meaning?
description: dogs outside looking around. one dog is looking suspiciously with narrowed eyes at the picture taker.
(if you see your tweet don't feel called out! It's just an example) pic.twitter.com/AxzevuMsq3
so: Don't overthink it. Make it as short as possible while describing what the photo is trying to convey. Any description is better than no description.
Hashtags
Hashtags on Twitter can be a problem when they are just long runs of all lower-case text. Not only are they hard to read for native speakers, but for non-native speakers of a language they can be impossible to parse. Further, screen readers just plow through them with generally poor pronunciation.
The best rule of thumb here is to essentially use camel case. Capitalize the first letter of each new word. It will be more readable, translatable, and better pronounced in screen readers.
I made a demo using this tweet:
My first time testing mixed case hashtags with screen readers was back in 2010. It was worlds better, but since I generally shunned hashtags I did a poor job of sharing that insight.
Emoji
Emoji can be problematic for a lot of reasons, some of which I outlined in my post Avoid Emoji as Class Names as well as my post Accessible Emoji, Tweaked. Neither of them deals directly with Twitter, though.
In general, avoid too many emoji. Understand that different screen settings and sizes may make them hard to see, and that different cultural backgrounds (and context) can change their meaning. But beyond all that, they are just verbose in screen readers.
I hid the source of those tweets, because that is not the only account to use 👏 to punctuate every word. It is also an extreme example, but I hope it gets the point across.
Wrap-up
Consider your audience. Consider making your tweets accessible. Now you can have a bigger audience.
Related
These tips generally apply to Twitter user names as well, though you should consider them in profile bios as well.
So you know all those emoji and punctuation marks in your Twitter names get read aloud by screen readers, right? If it takes me longer to hear your Twitter name than to read your tweet? I scroll right on by. Please remember this when adding lots of emoji to things. Thanks.
Similarly, you will see some overlap with being nice over SMS as outlined in Texting Etiquette for Low Vision.
Update: February 21, 2018
An interview with Sassy Outwater at CBC radio: ‘Loudly Crying Face’: Your cute emojis are spoiling social media for blind users
Update: March 3, 2018
Eric Bailey made a video demonstration how different Unicode text in display names is read by a screen reader.
Update: July 15, 2018
The post Listening to Poo, Your Emoji and You discusses how annoying emoji and other special characters can be in Twitter handles.
