Published on <a href="http://ift.tt/2pKnwWI">| Prototyping: From UX to Front End &mdash; Medium</a> Katelyn Lemay 
I first joined Twitter in 2008, and found it so boring that I doubted it would ever catch on. I suppose we can call that <a href="http://ift.tt/2kcGymB">my Prince moment</a>. Anyway, I joined before it was easy to share images, and now <a href="http://ift.tt/2oQeBBY">almost half of all tweets</a> contain images.
Lately I’ve been wondering what it’s like to use Twitter if you have a visual impairment. Most tweets that contain images rely on those images to convey a point, and something is lost in translation if the image is missing. Imagine using a screen reader to read a tweet like this:
<blockquote>
At this rate, no
 — <a href="https://twitter.com/ericajmoss/status/850038193244303360">@ericajmoss</a>
</blockquote>
At best, you’d get “[image] At this rate, no”.
As it turns out, Twitter has <a href="https://support.twitter.com/articles/20174660">a built-in accessibility feature</a> that allows users to create descriptive captions for images. I’ve never seen this feature in use, probably because few people know it’s there.
<h4>Making your tweets more accessible</h4>
If you want to start adding descriptions to images that you upload to Twitter (and you should!) you can enable this feature in your account settings. If you’re using twitter.com (as opposed to one of Twitter’s mobile apps), follow these steps:
<ol>
<li>Click on your profile picture at the top right of the screen, between the search bar and Compose Tweet button.</li>
<li>Select Settings and privacy from the drop-down menu.</li>
<li>On the next page, scroll down to reach the bottom of the menu on the left-hand side. The Accessibility option will be all the way at the bottom.</li>
<li>Click on Accessibility and on the next page, check the box next to the Image descriptions option. This will allow you to enter a short description when you add images to your tweets.</li>
</ol>
(You can find instructions for the iOS and Android apps in <a href="https://support.twitter.com/articles/20174660">this Twitter support article</a>.)
The next time you add an image to a tweet from any device, you’ll see an option that says “add description,” like so:
<img alt="" src="http://ift.tt/2p1TnRQ">Description: The “Compose Tweet” window with text and an image underneath. The image has a box that says “Add description” in the lower right corner. Image source: <a href="https://blog.twitter.com/2016/accessible-images-for-everyone">https://blog.twitter.com/2016/accessible-images-for-everyone</a>
<h4>Writing (quality) image descriptions</h4>
I hesitated before using Twitter’s example above, because the image description given is… not very good. The tweet says “Coolest clouds I’ve ever seen” and the image description doesn’t even mention clouds until the very end. I have seen a lot of people who mean well write image descriptions that actually make content more cumbersome for people to navigate with screen readers.
Let’s start with some web accessibility basics. WebAIM <a href="http://ift.tt/2eoFCss">has a pretty good explanation</a> of why image descriptions are important and how to write them well. To summarize, we want to write image descriptions that are functional and succinct.
<ol>
<li>Function over form: Not all images need to be described, and very few need to be described in great detail. Ask yourself what the image in question is accomplishing — is it the punchline to a joke? Does it provide supporting data to a claim? Or does it simply restate what’s in the text? Think about how you would describe the tweet and image to a friend if you didn’t have your phone with you. Maybe you wouldn’t even mention the image. If that’s the case, it doesn’t need a description.</li>
<li>Stay succinct: Twitter’s image description function allows for up to 420 characters, but you shouldn’t need to use all of them. Avoid starting your description with “image of” or “graphic of,” since a screenreader will tell users they’re looking at an image. Most importantly, include only what’s relevant to the written content. In the example from Twitter’s support article above, it would be more helpful to describe the clouds than to describe the wildflowers and hills.</li>
<li>Include text: This will be relevant primarily for memes, but if there is text inside the image, reproduce it in your description.</li>
</ol>
There’s a lot more that goes into writing quality image descriptions, but if you’re just starting out, these basics will go a long way.
<h4>Next steps</h4>
As far as I can tell, this image description feature is only available when you compose a new tweet, so if you re-tweet an image you won’t be able to add a description. I don’t know that I have a good solution for this at the moment, but I hope Twitter comes up with one soon. In the meantime, describing images that you add to your tweets is a helpful step toward a more accessible web.
<img src="http://ift.tt/2pKcoGn" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2p1UQb2">Twitter’s hidden accessibility feature</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Twitter’s hidden accessibility feature

Top Stories