Originally posted on www.a11ywithlindsey.com. In that post I've included videos with how it sounds to screen readers, but because they aren't hosted on youtube, I cannot link them here. Check them out on the original blog post!
I wrote a tweet thread a while back where I started talking about ways to keep accessibility in mind on the platforms we use such as Twitter. Sometimes we donโt have control over the platforms we use, and the best we can do is ensure our content is accessible. This tweet thread got a decent amount of attention, but unfortunately, itโs easy for things to get lost in the Twitterverse. I decided to write a blog post elaborating a bit more on each of the critical points I made while also ensuring that you could find them more easily.
Be careful with your emoji use
Thank ๐ you ๐ Kent! (don't do the clap thing either, it's a huge pain in screen readers)
โ Marcy Sutton (@marcysutton) January 9, 2019
Marcy pointed out here how the clapping hands are actually a pain for screenreaders.
Hereโs what it reads if you turn on your screenreader: โThank clapping hands you clapping hands Kent.โ Can you imagine if it was done between every single word on a longer sentence? I see passionate people do this all the time, particularly when they want to say something regarding social issues. I get torn between two worlds because I know how awful it is for screenreaders, but usually, there is a message behind the tweet that I support.
In general, we should be careful about our emoji use. I created a tweet just for the purposes of this blog post. If we clog an entire tweet with just emojis and no words it sounds like word vomit.
I love emojis, but let's not abuse them. We should use words more!
Donโt use special characters in your handle or your tweets
Iโve already mentioned this tweet in previous posts, but Iโll repeat it:
You ๐ต๐ฉ๐ช๐ฏ๐ฌ it's ๐ธ๐๐โฏ to ๐๐ฟ๐ถ๐๐ฒ your tweets and usernames ๐๐๐๐ ๐๐๐. But have you ๐ก๐๐จ๐ฉ๐๐ฃ๐๐ to what it ๐ด๐ฐ๐ถ๐ฏ๐ฅ๐ด ๐ญ๐ช๐ฌ๐ฆ with assistive technologies like ๐ฅ๐ธ๐ฒ๐ฌ๐ฎ๐๐ฟ๐ฎ๐ป? pic.twitter.com/CywCf1b3Lm
โ Kent C. Dodds (@kentcdodds) January 9, 2019
If you listen to his video, can you hear how much it doesnโt make any sense? It may not be as cute or as fancy, but it's usually a good idea to not try to use fonts that are unsupported on the platform. Twitter doesn't give you the ability to choose a font, so you shouldn't try without testing to ensure it works for everyone.
Enable Alternative Text on your Tweets
And actually use them! If youโre on your Desktop computer, you can enable them by:
- Click on your Profile Picture and go to Settings & Privacy
- Go to the Accessibility Section in the left sidebar
- Check โCompose image descriptionsโ
Look, I even recorded it for you!
Once you get this enabled, you should be able to see an โAdd Descriptionโ on your images. Also, Twitter, why isn't this enabled by default?
Test your Profileโs Page Contrast
Have you ever tested the color contrast on your Twitter Profile theme? After checking the default themes on my Twitter profile, I discovered that they have shockingly poor contrast. I use the Webaim Color Contrast Checker to see what the contrast is. The minimum contrast for Large Text is 3:1 and for small text is 4.5:1. Here are the contrast colors:
-
Orange Theme - The background color is
#FE6A1F
on a white foreground color which has a contrast of 2:88:1. (FAIL) -
Yellow Theme - The background color is
#FAB81D
on a white foreground color which has a contrast of 1.76:1. (FAIL) -
Light Mint Theme - The background color is
#7FDBB6
on a white foreground color which has a contrast of 1.65:1. (FAIL) -
Mint Theme - The background color is
#19CE86
on white foreground color which has a contrast of 2.06:1. (FAIL) -
Periwinkle Theme - The background color is
#91D1FA
on a white foreground color which has a contrast of 1.65:1. (FAIL) -
Blue Theme - The background color is
#1A94E0
on a white foreground color which has a contrast of 3.30:1. (PASS large text only) -
Gray Theme - The background color is
#ABB8C1
on a white foreground color which has a contrast of 2.03:1. (FAIL) -
Dark Pink Theme - The background color is
#E81C4F
on a white foreground color which has a contrast of 4.46:1. (PASS large text only) -
Light Pink Theme - The background color is
#F58EA7
on a white foreground color which has a contrast of 2.26:1. (FAIL) -
Purple Theme - The background color is
#981CEB
on a white foreground color which has a contrast of 5.67:1. (PASS both large and small text)
So if you count that, out of 10 themes only 1 (!!) has a passing contrast on both large and small text. 2 pass with larger text. The rest fail. This stinks on Twitter's part, but you can also add your own custom HEX Color Code! I just changed mine to have it be one of the colors in my design on my site.
Communicate with words, not symbols making a picture
โTodayโs teaโ seems to be pretty popular on Twitter, but I canโt stop thinking about what this sounds like on a screen reader.
Today's tea:
โ Jay Shelat (@jshelat1) February 7, 2019
(
( ) )
_(_____)____(_____(____(_
\ Grad students /_
\ should be / |
\ paid livable /___|
\ wages for /
\ their hard /
\_ work _/
Because I couldn't stop thinking about it, I found a tweet and turned on my screen reader. I posted a video on my blog about what it sounds like.
So, uh, yeah. Not sure how to fix it aside from not doing it.
Transcribe Memes and Gifs
As of this writing, there is no way to add alt text to gifs. I usually do this by typing in [gif alt: Descriptive phrase]
in the body whenever I add a gif. Sometimes I see people respond back to me with a gif message and a gif alt back, and that makes my heart sing. You should do the same with Memes, especially once you have enabled Alternative Text on your photos using the tip above. (Source: Life of a Blind Girl: 6 ways to make your social media posts accessible for people with a visual impairment)
Capitalize the words in your hashtags
This one is new to me, but it makes a lot of sense. Without it, it makes a lot of screen readers mash up the words and sound like a jumbled mess. (Source: Life of a Blind Girl: 6 ways to make your social media posts accessible for people with a visual impairment)
Conclusion
I want to thank people who write blog posts like the one mentioned for the source of the last two sections. If you haven't already, I would read that article because there are items that I wanted to include, but this post was starting to get too long. Even as an accessibility person, I still have a ton to learn about these platforms. I have also learned a lot from great advocates in tech as well, such as Marcy Sutton, Deborah Edwards-Onoro, and Tatiana Mac! Accessibility isnโt just about coding, itโs about real people who use products that have become everyday use and commonplace.
Remember to think before you tweet. Who are you potentially excluding from reading your Twitter content? If you have any thoughts on this post, feel free to reach out to me on, you guessed it, Twitter.
Top comments (12)
Adding alt text to gifs, I will keep that in mind, thanks
It's a really fun way to get creative too! I usually describe why I am using the gif!
Thanks for the GIF one as I tend to use a lot of GIFs but don't know what to type as alt text. And the last one was new. Does it mean I have to write #HASHTAG like this?
No itโs more like if you have a hashtag thatโs a phrase, capitalize the first letter of the word of the phrase
like #LoveYouTwitter ?
Ohh sorry I just skimmed fast. Should've read it :)
That's what it sounds like in my head.
I have no idea what it's supposed to mean, either. Does it mean the person strongly agrees with, is sarcastically slow-clapping or is just being cutesy? I haven't the foggiest.
When I see someone say "I โค๏ธ :unidentified mammal: :100!: ๐ฅ" I assume they're talking about a sportsball team, but even if I was familiar with the mascots for different locations, I'm going to struggle to work out whether you're talking about a beaver or an otter at the tiny pictogram sizes we're sharing. And it'll be different on different people's devices.
If I see more than the occasional smiley in someone's tweet, post, comment, whatever, I generally just skip the whole thing, and I bet I'm not the only one.
Hey Lindsey! Thanks for sharing these excellent tips - I'm hopeful that we'll see more people start to understand the importance. I admit that while I do have alternative text enabled, I am not very good at adding it - I've seen more people starting to do the alt thing with GIFs, too. Great advice here!
"Today's tea" when read by assistive technology sounds like some form of strange rap... I guess someone could make a song out of it... Nevertheless, I agree that it is best to avoid it.
Friend! This is so awesome!
This is a really great article! I guess it depends on your target group. Some followers are expecting the newest and most trendy combination of emojis and symbols ๐
I'm having a hard time picking a good theme color. My current one passes for night mode but falls a little short on normal mode. Do you optimize for one over the other?