People with disabilities may use assistive technologies like screen readers to help them navigate social media platforms and we need to make our posts as friendly to those technologies as we can.

Image descriptions

These are used to convey what’s visible in any visual (e.g., image, graphic, gif, video) to someone who may not be able to see all or any of it. A screen reader will read aloud whatever is written as an image description. A good image description details any action happening, who or what is in the visual, the placement of what’s there, and even mood or emotion. Try to keep an image description to no longer than a tweet (or, 280 characters).

Alt text

This is a much shorter version of an image description and is usually the field or option you’ll see on a social media platform or when uploading an image to WordPress. This is intended to be a brief and direct description of what’s in the image. Not only is it used by screen readers, but if the website doesn’t load your image properly, whatever text is included as the alt tag will appear in the image’s place. Try to limit your alt text to the old school tweet length (i.e. 140 characters).

Image description vs alt text

Here is an example of how one of our Wolfie gifs could be described to highlight the difference between an image description and alt text.

Image description: Wolfie is standing in front of a white background and wearing a red T-shirt. He’s giving two thumbs up and shaking his hands enthusiastically.

Alt text: Wolfie giving two thumbs up.

Closed captioning

Captioning is the text that appears on videos, usually at the bottom, that transcribes spoken text or ambient noise in a video. This is a great way to make them more accessible to people who are deaf or hard of hearing. Plus, many people watch videos with the sound off so captioning increases the number of people who can enjoy your videos.

Some social media platforms, like YouTube, will automatically apply closed captions to a video. Unfortunately, they’re sort of notoriously inaccurate, but they are better than no closed captions on a video. The best practice is to either correct automatically produced closed captions or create your own closed captions through tools like Amara.org (which is free!).

Add gif and video descriptions

Though the platforms make it easy to add descriptions and alt text to images, they fall short on offering the same for gifs and videos. A great way to make these more accessible is to add your own video or gif description to the Instagram caption, Facebook caption/post or tweet. This is usually done by putting the alt text in brackets and you could indicate whether it’s alt text for a gif or video (e.g., alt gif or alt video). For example:

Wolfie wishes everyone good luck on their finals!

[alt gif: Wolfie is giving two thumbs up and shaking his hands enthusiastically]

Facebook accessibility

When you upload an image to Facebook, it automatically produces alt text for your images, but it’s usually inaccurate. You can change the alt text for images you’re uploading and ones you’ve previously uploaded.

Add alt text to new images via desktop

1. Add an image to your post draft
2. Hover your mouse over the image
3. Click on the paintbrush graphic then on “alt text” on the left sidebar
4. Click on that and you’ll see the automatically produced alt text
5. Select “override generated alt text” and type in your description.

Edit alt text to previously uploaded images via desktop

1. Find that image and click on it to make it large
2. Hover over the image so you see a row of options appear across the bottom then select “options”
3. Click on “change alt text” from the menu that appears and type in what you’d like

Edit alt text to images on mobile

1. Tap on the image to make it large
2. Select the three dots in the upper-right
3. Tap on the “edit alt text” option in the menu that appears
4. Select “override generated alt text” to apply the text you’d like

Instagram accessibility

Add your image to Instagram as a new post and pause when you get to the screen that asks for your caption, people to tag, and location.

1. Swipe to the bottom and look for “advanced settings”
2. Tap that link and swipe down to find the the “write alt text” option under “accessibility”
3. Type your alt text in that field.

Twitter accessibility

Of these three platforms, Twitter is the only one that requires you to go in and turn on the accessibility feature.

Turn on accessibility via desktop

1. Click on the three little dots down the left sidebar
2. Select “settings and privacy”
3. Click “accessibility”
4. Turn on the “compose image descriptions” checkbox

Turn on accessibility via mobile

1. Tap on the gear icon in the upper-right
2. You may be taken to an area labeled “notifications” – if so, tap the left-facing arrow in the upper-left of the screen to take you to “settings and privacy”
3. Tap “accessibility” then make sure “compose image descriptions” is turned on

Once you’ve enabled this feature, you can upload a photo and you should see an option that says “add description” in either the lower-left part of the image or just below the image. Click/tap that to add your alt text or image description. 

Write hashtags in camel case

To make hashtags more readable, capitalize the first letter of each word (also known as camel case). It can be difficult for many people to parse out the words in a hashtag, especially long ones. Not only does it make it easier for eyeballs to read, it makes it easier for screen readers to read because they can sort out and pronounce the words.

Instead of #howlaboutit, when using our official university hashtag, use #HowlAboutIt.  

Accessibility with graphics and text

There are a few simple things you can do to make your graphics and text more accessible.

Be thoughtful of color contrast with text.

White text over a light grey background will be hard to read, but white text on a red background has lots of contrast. Also be aware of certain color combinations that may make things unreadable or indistinguishable for people with color blindness (e.g., red/green, green/brown, blue/purple, green/blue, light green/yellow, blue/grey, green/grey, and green/black). 

Go with larger text size.

Since many social media users are using mobile devices instead of laptops, graphics can appear small on smartphone screens. The smaller the text, the harder it is to read and images can become pixelated when zooming in. Start with your text on the larger side for readability.

Add graphic information to alt text and/or image captions

Screen readers can’t read text on an image file/graphic, so any information conveyed in the graphic (e.g., start time for a theatre production on a theater poster) should also be in the image caption and/or alt text.

Avoid text over busy backgrounds

Contrast is important for color choices and busy backgrounds. If you’re placing text over a busy background, it can be more readable if you add a solid color block behind the text and in front of the busy background so people can easily see the text.

Add line breaks to blocks of text

Paragraph breaks aren’t just for essays and emails. Be sure to add line breaks (hit return a couple of times) between paragraphs when posting long messages on Facebook or Instagram captions. When a lot of text is together without a visual break, it can be hard for many people to read.