Read time: 7 minutes
Editors Note: This post was updated and revamped in March 2022 for better accuracy and comprehensiveness.
Take a photo. Write a caption. Share.
It’s safe to say that this routine is what the majority of people will follow when it comes to sharing photos online.
Some even take it a step further, as a lot of effort can go into the photo capturing process and even the copy that populates the caption.
But even with those extra efforts, the process doesn't divert too far from the formula.
Whether you’re sharing content on a website or posting on your social media channels, most people follow this routine.
But there’s one problem with it:
Writing alt-text isn’t being considered.
In years past, most social sharing sites and web builders never really told people about how they can create alt-text and the impact it has on the online experience.
So, naturally, people built their posting routines without considering alt-text.
Nowadays, alt-text has slowly become the norm, but there are still two problems:
- Many people don’t know how to properly write it, which can lessen the positive impact alt-text can create.
- People are “set in their ways” in regards to their content sharing routines and can easily forget to write alt-text altogether.
Although both reasons are understandable, it still isn’t enough.
Now compare that to the nearly 1 in 5 people in the United States that have a disability, and it's clear on those stats alone just how impactful writing alt-text can be for online users.
When it comes to creating a more inclusive web, small actions matter, and writing alt-text is one of the best and simplest ways to contribute to that overall goal.
It all starts with understanding just how easy it is to write alt-text, and it only takes a few small adjustments!
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, 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 as an example.
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 and web 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.
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. Keeping it at or under this mark ensures your alt-text will be properly translated and understood by most screen readers.
Don’t start with “A picture of…” or “An image of…”
Along with wasting character count, it’ll be pretty clear to a person using a screen reader 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.
Since a screen reader only reads past a certain character count, you need to think about how to quickly ensure the user understands the photo and its purpose.
Not all photos need alt-text
Any images that are purely decorative and offer no value or context will not need alt-text.
If you have a photo that is mostly shapes and lines, and it doesn’t have any other purpose for the content other than “looking nice,” then it’s ok to omit it.
With this said, please be careful with what you deem is “purely decorative.” If you aren’t sure a photo needs alt-text or not, play it safe and write alt-text for it anyways.
In this case, it’s better to be safe than sorry.
Now 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.
This photo directly relates to a science course that’s being showcased on ECU’s webpage. 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 content you share.
And with so many social media sites and site-building platforms 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? Or wanting to better understand how you can create a more accessible and inclusive web?
Sign up for our Unity Insights newsletter!
Every two weeks, we provide you with our latest content, tips on web development and accessibility, and a news story you should know about.
Plus, newsletter subscribers are also the first to learn of any specials and promotions we’ll be running throughout the year!
Not sure if our newsletter is right for you?
Learn more at the “Unity Insights Newsletter” button below and see if it makes sense for your inbox!