We’ve all been there: taking pictures at 20 different angles, editing images to give them just the right look, and spending way too much time going back and forth between two photos with almost imperceptible differences to pick the one that looks juuuuuust right.
We spend excessive amounts of time devoted to choosing the images for our posts and social media to express ourselves and our brand to our audience – but how is that being conveyed when those images can’t be seen? What message is being sent to individuals and search engines who are unable to look at your carefully crafted images – and how can you make sure that message makes the biggest impact for you and your audience?
Alternative text. It’s something you’ve probably heard of, especially whenever the topic of digital accessibility comes up. But it can also come with a lot of questions about why, how, and where to do it well. So before jumping into all those details, let’s first break down: what is alternative text?
Brief Introduction to Alternative Text
Alternative text is one of the most well-known forms of web accessibility. Often shortened to alt text, it’s most basic purpose is to describe the content or function of an image. In other words, it provides a text alternative of an image for those who are unable to see or interpret it on their own. While alternative text should be added to every image that isn’t decorative, it is visibly hidden to most website users.
Other Names for Alternative Text: alt text, descriptive text, alt attributes, alt tags, image description
Accessibility Principle it Supports: Perceivable (providing a text option for non-text content)
Alternative Text is Used For…
While there are several reasons all images should include alternative text, the general idea behind all three is the same: to ensure the image’s intended purpose is communicated, especially in the context of the surrounding content.
The main purpose for writing alternative text for any images or gifs you share online is to provide a visual description for any person who is visiting your website or social media posts and using a screen reader.
A screen reader is a piece of software used by many people with visual or certain cognitive impairments to audibly covey information on their computer, phone, or television screens. According to the National Federation for the Blind, nearly 8 million people in the U.S. report to have some type of visual disability. Having accurate and descriptive alternative text on images helps make certain screen reader users have a similar experience engaging with your content as those who are fully sighted.
Websites that Don’t Load Images
At some point while trying to scroll Facebook or Instagram, you’ve hit a period where images aren’t loading, and you see a series of blank areas saying “Image may contain: trees; two people.” Or if you’re in an area with a bad internet connection and instead of seeing photos on a website, you see the image file names.
These are the rare instances when you have a glimpse as to what a screen reader would announce to a person using it. If you’ve come across this and wish you knew what the image actually contained, you have a sense of what many blind people experience on the internet every day. By including alternative text for your images, whether an image doesn’t load because of internet issues or someone is using a browser that suppresses images, they’ll still know what the image is and why you included it.
Just as you want to describe an image for a person who can’t physically see it, you want to do the same for search engines so they understand how and why it’s being used on your website. I want to be clear though: while this is another opportunity to use your keywords to help your website reach the right people, the alternative text field should not only be thought of an additional place to put your keywords. Aside from the fact that most search engines can tell when you’re keyword stuffing and will penalize you for it, your first priority should always be to describe the image for your readers who have no other way of identifying what’s in it.
Related Post: Alternative Text vs. Image Descriptions for Instagram
7 Tips for Writing Alternative Text
- Keep it short and sweet. The general standard for alternative text on websites is 125 characters or less; you shouldn’t need a lengthy description in most cases because your images are used to support the surrounding text. On social media, since photos help tell more of the story, it’s common to have a longer description of 1-2 sentences.
- Answer the question “What purpose does this image serve?” If you’re stuck on what to write, start off with identifying the primary subject of the picture. Then think about why you picked that image and placed it where you did – what connects this image to the surrounding text?
- Use your keywords, but not excessively. In theory, at least one image on your page should be relevant enough to include your keyword while describing the image. If not – you need to rethink either your keyword or your images.
- Avoid redundancy. Don’t use the same alternative text for every image on your post/page or duplicate what you have in the caption for the alt text. Note at least one unique detail about each image to differentiate it from the others. You also don’t need to include “photo of…” or “image of…” at the beginning of your alternative text – a screen reader announces that it’s an image before reading the alt text provided.
- If your image includes text, type it verbatim. Generally you should try to stay away from posting an image that is just text, but if that can’t be avoided, make sure it’s written in the surrounding text on the website or within the alternative text. If you’re sharing a screenshot of text from an article or website on social media, include a link to the original source.
- End your alt text with a period. This will prompt a screen reader to take a pause after it reads the alternative text. This isn’t a necessity, but provides a better user experience.
- Remember – you’re writing for a person. Whether it’s for a screen reader user, someone whose website isn’t loading images or a person entering a search term, alternative text is just another way that you’re writing for your audience. There is technology assisting that process, but alt text can still have your voice and creativity.
Want to Learn More?
With alternative text being one of the most widely known and used aspects of web accessibility, there is no shortage of discussion on the subject.
The digital accessibility specialists at Deque have written a deeper dive into alternative text and it’s benefits, as well as examining how to write alternative text for different types of images in their article “How to Design Great Alt Text.”