Welcome to the first of our Top Tips blogs, written for social media teams to bookmark and use as a resource with your team and colleagues. We want to raise the profile of good practice that should always feature in your social media tool kit.
In this blog we are focusing on Alternative Text, or Alt-Text as it's often called. This is your one-stop-shop for useful resources to help you to include Alt-Text in all of your social media content.
What is Alt Text?
"Also called "alt tags" and "alt descriptions," alt-text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website." Hubspot
Alt-text may be an unknown feature to you, something you are aware of but don't know how to use it, or something you always include in your content. Use this blog as a refresher or to learn what you can do to improve the experience for all social media users, particularly those with accessibility challenges.
Our Director Rob volunteers for Guide Dogs, a charity which helps the blind and partially sighted people with the provision of guide dogs. Here is what Emma Tucker, Marketing & Communications Manager (South West) at Guide Dogs had to say about alt-text:
“Not everyone uses the internet in the same way. Some people use screen readers or other technology to access social media and the wider internet – and it’s important that their experience is just as complete as everyone else’s.
“If there’s no alt-text on an image, a screen reader will just say ‘graphic’ or skip over it entirely, which gives no context as to what’s there! As you normally would, just consider your audience when you’re creating content and make it as accessible as it can be.”
In addition to making use of the Alt-Text feature on social media platforms, Guide Dogs will also add visual description text. Essentially they are covering all bases to ensure their social content is as accessible as possible, whether their audience members use screen reading or magnifying technologies.
What are the uses of Alt-Text?
Adding alt-text is of the utmost importance for web accessibility. For web users who are blind or visually impaired including an image, description means a screen reader will be able to interpret the alt-text. Including Alt-text on your post/site with your images ensures that all users, regardless of their visual ability, can appreciate the content on your site.
Alt-text is also useful to provide better context to an image or will be used as a replacement for an image when the page cannot be loaded.
How do you write alt-text?
Firstly, try to describe the image in as much detail as possible. After all you are writing a text explanation for users who are unable to see your image. Do not assume your reader has never had sight, there is a high chance they have memories of what things look like. The more detail you provide, the easier it will be for them to paint a picture in their mind.
Keep the description short. The reason for this is two-fold. Firstly, screen readers generally cut off alt-text description at 130 characters. Secondly, a short description means that the listener can quickly navigate your site. Screen readers often read at a faster pace, so don't make it too hard to follow the narrative.
Use keywords that are relevant to your image. Using target keywords means that the description will be punchy and relevant. Don't include "an image of" or "picture of" because it will already be inferred when reading alt text.
If you are posting announcements as images, either provide a visual description below or reference to where readers can view it on your website.
So where do I add Alt-Text on social media platforms?
Facebook has a great feature that automatically detects an image to provide an image description. The description is basic, for example, your profile picture may be; “1 person, smiling”. This is a great starting point but it's better to include a detailed description.
How to add on mobile and desktop:
Select the photo you want to add.
Hover over the photo and click Edit.
The automatically generated text will be shown on the left side of your photo. Click Override generated alt text to edit it.
Write your alt-text in the box. To change back to the automatically generated text, click Clear.
To change the alt-text of a photo after you've posted it:
Click the photo to open it.
Click in the top right and select Change Alt-Text.
It is pretty easy to find where to add alt-text on Twitter, including it should therefore be part of your content preparation.
How to add on mobile and desktop:
Open Twitter in a browser or mobile and create a tweet in the usual way. Click the Image button to add your photo to the tweet.
Below the image and to the right of "Tag people," click "Add a description".
Type your alt-text in the "Description field." You can use up to 1,000 characters, though you probably shouldn't use all that space — good alt-text is usually under about 100 characters, no longer than an actual tweet.
When you're finished, click "Save." To return to your alt-text, you can now click "ALT" in the lower-left corner of the image.
Instagram's alt-text option is a harder to find but is still easy to use once you can find it. Alt-text can be added to photos during the publishing process by following the steps below:
How to on mobile and desktop:
Start by taking a photo or uploading an existing photo to Instagram.
Choose a filter and edit the image, then tap Next.
Tap Advanced Settings at the bottom of the screen.
Tap Alt-Text.
Write your alt text in the box and tap Done.
On Instagram, adding a visual description in the body of the post is recommended. If you post a carousel of images, remember to add a description for each image.
You can add or edit alt-text for images you upload from a desktop computer, by clicking Add description at the top right of your image. Adding or editing alt-text isn’t yet available on mobile devices. LinkedIn may automatically add alt-text to images that don’t have it.
When uploading an image from a desktop computer, you’ll be alerted if alt-text is automatically assigned. You won’t be alerted if you're uploading an image from a mobile device.
Alt-text and Social Media Management Platforms
If you use third party tools (e.g. Falcon, Sprout Social, etc) to post your social media content, we recommend researching how they handle adding alt-text. Alexa Heinrich (@HashtagHeyAlexa) has written a handy article on this topic, check it out on Medium.
About the Top Tips blog series
Nobody is perfect and sometimes our workloads can get in the way of doing everything 100% as it should be on social media. We'd love to hear from you about what topics you'd like us to cover. Get it touch on our contact page.
You have written quite a large tutorial article. But it’s easier to record a training video and post it on social networks. People are more attracted to different videos. You can find the video converter here. This converter allows you to compress videos for Twitter.