Last updated: May 2022

All About Alt Text

"Alt Text" might be one of those daunting words that you've heard about, but you don't understand exactly what it is, and that's okay! This article will tell you most everything you need to know about using alt text and why we do it.

What is Alt Text?

Alt text—or, alternative text—is a description given to a digital image that gets embedded into the HTML code of that image. This is different from a description, caption, or body text. Alt text is read by a screenreader when it comes across the image. 

This text is meant to both describe an image and provide context for the image. In other words, it can be thought about as the "what and why" of a digital image in the context of a larger entity, such as a social media post or article on a website.

Why is Alt Text Important?

Studies on users who use screenreaders have shown that the most inaccessible part of web content or social media content is images that either have no alt text, or that use ineffective alt text.

But accessibilty isn't the only practical reason to add alt text to your images. Using alt text is important for many reasons:

• Alt text makes your image accessible. Accessible content is a MUST on digital platforms. Visually-impaired users who cannot see images will have the alt texts read to them via a screenreader. This allows the person using the screen reader to also experience the image. Using alt text is a way to make your web content more inclusive. Learn more about accessibility on social media.
• Search engines read your alt text. Search engines cannot "see" quite the same as many of us, although image recognition software has vastly improved in recent years. These search engines rely on alt text to know what an image is of. Adding alt text not only helps the search engine index your image, it also can provide some Search Engine Optimization (SEO), which helps your webpages to get found easier in a search on, say, Google.
• Alt text is displayed when an image fails to load properly. Having alt text for moments when your page isn't loading as intended is a nice way to inform readers of what they should have been seeing, even though the image failed to load.

Which Images Need Alt Text?

All images, whether on social media or on a website, need alternative text—or something comparable, such as image descriptions in the caption of your Facebook post as opposed to the alt text—in order for the content to be considered AA compliant by Web Content Accessibilty Guidelines (or, WCAG 2.0) if the image is providing information for the reader.

Images that are purely decorative and that don't add anything to the context or the meaning of the page or post can be marked or labeled as a decorative image.

Tips for Writing Alt Text

1. Be descriptive and specific. You want to add as much relevant detail as possible, while also keeping your alt text fairly succinct. 
2. Keep your alt text relatively short. Many screenreaders will stop reading a lengthy alt text around 125 characters, so try to keep yours under that character limit.
3. Incorporate keywords. Keywords will help search engines sort your content into appropriate categories, making it easier for your content to be found in a search.
4. Avoid just using a bunch of keywords. You don't want to do what we call "keyword-stuffing" simply for the sake of SEO. This is a common practice that is frowned upon as this will create a confusing alt text for someone via a screenreader. See an example of keyword-stuffing in the next section called Example Alt Text in the "Bad" category.
5. Write out important words in an image. If, say, you upload a graphic advertising an event, it is likely you have included several words on the graphic that will not be legible via a screenreader unless you include that information in your alt text. You will need to include at least the most important words in your alt text.
6. Don't say "image of" or "picture of." This is unnecessary and redundant information. A screenreader will alert the reader that they have approached on image.
7. Try to convey the context of your image in the alt text. If possible, include why you are including this image in as succinct a way as possible.
8. Add alt text to charts, graphics, and graphs. Any image, even if it's not a photo, needs to include alt text.
9. Don't assume someone's race, gender, or other identity. Unless you know for certain someone's identifying characteristics, avoid using those traits as descriptors in alt text.

Example Alt Text

Bad: no alt text, or keyword-stuffing, for example: "person, cleaning, trash, volunteer, creek, fall, autumn, garbage, human"

Okay: "person cleaning creek"

Good: "person in creekbed picking up trash"

Better: "person in pink hat, blue shirt and pants, and red gloves picking up trash out of creekbed"

Best: "Volunteer Amy Cole wearing a pink hat, blue shirt and pants, and red gloves picks up trash out of Coleman Creek"

How to Add Alt Text on Social Media

Each platform allows you to edit alt text differently. Find links to instructions for adding alt text to those platforms below:

• Adding Alt Text on Facebook
• Adding Alt Text on Twitter
• Adding Alt Text on Instagram