Take a photo. Write a caption. Share.
That’s how many people create content on social media.
A lot of effort can go into the photo capturing process and even the copy that populates the caption, but the process doesn't divert too far from that.
And although a lot of people will go on to enjoy the content that is shared, that can’t be said for all people.
Nearly 1 in 5 people in the United States have a disability, and it's one of the most diverse and largest minority groups in the U.S.
Now compare that to the number of people in the U.S. that use social media:
Around 247 million (around 79%) of the population in the U.S. use social media in some shape or form.
That's a lot of people.
Fortunately, people with disabilities can and still enjoy social media due to the assistance of technology like screen readers, but it may not be as helpful if accessibility isn't incorporated into the social content itself.
Over the years, social media platforms have done a better job of including accessibility features within their posting settings.
In fact, one of the key features you can find on a lot of major social platforms is alt-text, and that includes Facebook, LinkedIn, Twitter, and Instagram.
But what exactly is alt-text? And how can it help people with disabilities to better understand and enjoy social media content?
So, what is alt-text?
Alt-text is used within HTML code to describe the appearance and purpose of an image on a page. It’s typically used by individuals who are blind or hard-of-sight and rely on a screen reader to navigate the internet, as a screen reader will be able to read the alt-text embedded within the HTML code.
Fortunately, we won’t have to learn HTML code to properly use alt-text within social media, as many platforms come with alt-text options for you to use.
(But if you want to learn how to embed alt-text into your HTML code, don’t let us stop you! It’s a great skill to learn.)
Let’s look at Twitter.
In this sample tweet composed above, notice the “Edit” button that is found in the top right corner of the photo. That’s where you’ll need to go to properly embed alt-text.
Once you click that edit button, you’ll find an alt-text tab. Simply click it, and it'll take you to a field that allows you to type up your alt-text up to 1,000 characters.
Although other social media platforms will have different ways in regards to how they’ll have alt-text options available, it's safe to say that they'll have it available in some shape or form.
But for the most part, it should be really easy to find! And after a few clicks, you’ll easily be able to add alt-text into your social media.
But writing alt-text isn’t like writing a typical caption or tweet. There are a couple of things you need to think about when it comes to writing alt-text.
How to Write Alt-Text
So, how exactly can you write alt-text?
There are a few key rules you need to keep in mind while writing:
Keep your alt-text at or under 125 characters
Most screen readers stop reading at the 125 character mark, which could make your well-written alt-text sound awkward if it’s cut off at the wrong time. By keeping it at or under this mark, this ensures your alt-text will be properly translated and understood.
Don’t start with “A picture of…” or “An image of…”
Along with wasting character count, it’ll be pretty clear to a person that it’s a photo, as the screen reader and Google (if they use platforms like Chrome) will quickly identify it.
Basically, get right to the point!
Specific and concise
When writing alt-text, use the image, the context behind it, and the content supporting it to guide you in creating your alt-text. But also make sure that you aren’t being so detailed and specific that you have to go over the 125 character count to get your point across.
Not all photos need alt-text
Although most social content will need alt-text due to the nature of social media, we felt this was worth mentioning:
Any images that are purely decorative and offer no value or context will not need alt-text.
We'll make sure to touch on this rule in a future blog post, but we believed it's something worth keeping in mind as you start to incorporate alt-text into your social media and even on web pages.
Let’s see how these rules work in action.
Alt-Text (Good and Bad)
Example 1: Detailed and Concise
Source: Golf Monthly
In this photo, we see PGA Tour golfer Rory Mcilroy swinging at a golf ball. A lot of times, that sentence alone should be enough in regards to your alt-text:
“PGA Tour golfer Rory Mcilroy swinging at a golf ball.”
But if you wanted to take it a step further, you can add additional detail to provide people with further context:
“PGA Tour golfer Rory Mcilroy driving the golf ball during the 2015 U.S. Open.”
Not only is this well under the required 125 character limit, but it also provides readers with additional context as to what the golfer is doing and where he’s doing it at.
But although this is great detail and context, it’s important to catch yourself and not go overboard, as it's really easy to do so.
“PGA Tour golfer Rory Mcilroy driving the golf ball and at the impact position of his swing during the 2015 U.S. Open at Chambers Bay golf course in University Place, Washington.”
Yes, all of that is technically correct.
Yes, it gives great detail.
But it’s a little too much for readers, and many screen readers stop reading text around the 125 character mark.
That could make this alt-text come off awkward and clunky, which could confuse your readers. And you never want to do that.
It's ok to offer detail to add context, but stick to the key points the photo offers you.
Example 2: What’s the context?
Source: East Carolina University
In this next photo, we see some students working on a project for their course. Although using that sentence would suffice, it’s important to offer context when applicable, especially if that photo is adding to the content.
For this photo, it directly relates to a science course that’s being showcased on social. So instead of:
“Students working on a project for their course.”
It could be:
“ECU undergraduate students working on a robotics project for their technology course.”
This provides the reader with an understanding of the photo, what the people are doing, and why it’s related to the content that's being advertised on social media.
And with that well under the 125 character limit (remember, there is no minimum), it’s guaranteed to be fully read by any screen reader used.
A win-win situation.
Like most skills, creating good alt-text takes time and, frankly, you’re not always going to nail it down (especially if it’s a complex photo).
But by taking the time to create alt-text, you are making sure that everyone can enjoy the social content you share.
And with so many social media sites making it simpler to add alt-text, it’s never been easier to make yourself and your content accessible and inclusive.
Looking to learn more about alt-text?
Feel free to reach out to us at firstname.lastname@example.org, as we’d be happy to help. And make sure you keep an eye on our blog, as we’ll be releasing content related to embedding alt-text within HTML and how alt-text impacts your WCAG accessibility ratings!