Improving Your Tweet Accessibility

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.

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:

The tweet as spoken by NVDA. Captions do not demonstrate how the second example is mushed together as one word, making syllables such as shash and oossers toe red.
The tweet as spoken by JAWS. Captions do not demonstrate how the second example is mushed together as one word, as above,

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.

The tweet as spoken by NVDA: if graphic clickable emoji colon, clapping hands sign y’all graphic clickable emoji colon, clapping hands sign dont graphic clickable emoji colon, clapping hands sign quit graphic clickable emoji colon, clapping hands sign deleting graphic clickable emoji colon, clapping hands sign ya graphic clickable emoji colon, clapping hands sign tweets graphic clickable emoji colon, clapping hands sign after graphic clickable emoji colon, clapping hands sign i graphic clickable emoji colon, clapping hands sign quote graphic clickable emoji colon, clapping hands sign them graphic clickable emoji colon, clapping hands sign makin graphic clickable emoji colon, clapping hands sign me graphic clickable emoji colon, clapping hands sign look graphic clickable emoji colon, clapping hands sign stupid graphic clickable emoji colon, clapping hands sign
The tweet as spoken by JAWS: if graphic emoji colon clapping hands sign y’all graphic emoji colon clapping hands sign dont graphic emoji colon clapping hands sign quit graphic emoji colon clapping hands sign deleting graphic emoji colon clapping hands sign ya graphic emoji colon clapping hands sign tweets graphic emoji colon clapping hands sign after graphic emoji colon clapping hands sign i graphic emoji colon clapping hands sign quote graphic emoji colon clapping hands sign them graphic emoji colon clapping hands sign makin graphic emoji colon clapping hands sign me graphic emoji colon clapping hands sign look graphic emoji colon clapping hands sign stupid graphic emoji colon clapping hands sign

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.

Unicode

It is common to see tweets or Twitter handles with characters you do not find on your keyboard, such as upside-down letters, Old English, or even bold or italic. These are typically Unicode characters (like emoji) which are not announced by screen readers and sometimes not rendered as you expect.

The Unicode characters that make the bold “do not” and the italic “but will kill you” are not announced in screen readers. A user will hear “Please eat the shrimp scampi in the fridge. It is tasty.” That would be a terrible outcome if the user followed that advice.

The example is not serious, but consider how many people follow official accounts for tornado warnings, traffic alerts, food safety, and so on. If one of the person managing that account uses this faux bold or italic technique to reinforce the more important details of an alert or warning, some set of users will never be aware of it.

Interestingly, this WordPress blog stripped those characters, so if you view the tweet without the Twitter script that embeds the Tweet itself, you would also not see the faux bold and italic. I added plain HTML to make it work.

This is not limited to screen readers and WordPress blogs that embed these tweets.

Eric Bailey made a video demonstration how different Unicode text in display names is read by a screen reader.

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:

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.

User profile menu in the Twitter app. Settings and privacy screen in the Twitter app. Screen in the Twitter app to enable accessibility settings.

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.

A new tweet being written, with an option to add an image description to the attached image. The dialog box to add alt text to an image.

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.

Composing a tweet with an image in the Android app. The screen in the Android app to enter your image alternative text.

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.

Video Captions (added April 3, 2019)

Twitter announced support for captions on videos on Twitter in perhaps the most confusing title possible: Subtitles now available in iOS and Android

Captions have been supported for some time, but the process to provide them has been opaque to authors, and the option to see them has relied on the user’s accessibility settings in iOS or Android. This approach supports all users on Android, iOS, and web. Unless the user expands the video, which makes sense to someone at Twitter.

To do this your Twitter account first needs access to the Media Studio library, or some way to feed the captions into the API. You will also need to ensure your captions are saved in the .SRT format. If you can get that far (copied from the Twitter post):

  1. Click on a video within your Media Studio library.
  2. Select the “Subtitles” tab in the pop-up window.
  3. Select the text language of your subtitle file from the dropdown menu.
  4. Click the “Upload” button and select the sidecar .SRT file from your local computer.
  5. The file is now associated with your video. To update the file, click the Pencil icon.

To recap, a general user cannot add closed captions to videos. So you are stuck linking transcripts or embedding open captions in the video.

Wrap-up

Consider your audience. Consider making your tweets accessible. Now you can have a bigger audience.

These tips generally apply to Twitter user names as well, though you should consider them in profile bios as well.

Similarly, you will see some overlap with being nice over SMS as outlined in Texting Etiquette for Low Vision.

Updates

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: 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.

Update: January 18, 2019

Eric Bailey points out that Twitter’s default themes have terrible color contrast. He has a few tweets with tips.

The trick for me is getting a color I like that meets WCAG contrast guidelines for both the white background and surrounding text. #6161FF has a contrast ratio of 4.66:1 with #000000. #6161FF has 4.5:1 with #ffffff (background). Too bad Twitter tweet text is #14171A.

Once again, the easiest and best fix is for Twitter to add link underlines. But you can at least tweak the colors in the meantime.

Update: February 26, 2019

Lindsey Kopacz has recapped most of these in 7 Ways to make your Tweets more Accessible, reinforcing that these approaches help users.

Update: February 27, 2019

Cole Gleason has used a Twitter thread on Twitter images to share a paper he is presenting with others at The Web Conference. Generally he asserts that Twitter has buried the feature.

At the end of the thread he outlines some processes that may help increase alt text use, besides Twitter enabling the feature by default.

Update: March 26, 2019

4 Comments

Reply

Hello, thank you for the great information on making Twitter accessible. I was about to Tweet a link to your post about emojis, but realized that there wasn’t audio that matches what the Jaws reading. Would it be possible to include a transcript so the post is accessible to people who are Deaf or rely on captions or transcripts? Thank you for considering. Best, Susan Henderson

In response to Susan Henderson. Reply

Ah, oops. Great suggestion. Will add and comment here when done.

In response to Adrian Roselli. Reply

I failed to come back and notify that I added transcripts to the emoji tweet videos.

Reply

Thanks! It’s great information. I’m sharing it with our staff.

Susan Henderson; . Permalink

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.