How to Create Alternative Text for Images for Accessibility and SEO

space bar on a keyboard

If you create or publish digital content of any kind, it’s likely by now you’ve at least heard something about the importance of creating content that’s accessible for people with disabilities. Alternative text (also called “alt text”) helps ensure people who are blind or visually impaired, or who may have other physical or cognitive disabilities can access and understand visual content such as images, charts, and graphs.

In the United States, the Americans With Disabilities Act (ADA) requires that all digital content be accessible to people with disabilities. Other countries have their own requirements. For people who use screen readers or other assistive technologies to access digital content, accessible content is essential to ensure they are able to access and understand the content in the same way that someone who does not require assistance would.

What is alternative text?

Alternative text, in its simplest form, is background code added to a digital image that allows a screen reader or other assistive technology to describe the image’s content and meaning to those who cannot see the image or may be unable to process the image due to a cognitive disability.

It’s used in several ways:

  • Screen readers and other assistive technologies use it to describe the image to users so they can access and understand the content.
  • In browsers where images are blocked, the alt text is displayed in place of the image.
  • Search engines use it to determine the content and context of images.

Screen readers can tell when an image is present, but they cannot analyze their content. The alt text is read in place of the image to give users understanding of the image’s meaning and context.

How to add alt text to images

Unfortunately, there is no one way to add alternative text. Different software platforms do it in different ways. Check your software’s documentation or help files for information on how to add alt text to your images from within that platform.

In Microsoft Word, for example, right-click on the image and choose Add Alt Text. Then, add your text into the alt text window in the sidebar that opens. When you’re finished, simply close the sidebar and your alt text will save with the image.

Animated GIF showing a user right-clicking on an image and filling in alternative text using Microsoft World

Alt text vs. captions

Alt text and captions are similar in many ways. Both provide a description of the image and context of how the image fits in with the rest of the content. However, alt text is typically “behind the scenes,” whereas captions are visible to anyone accessing the page. Furthermore, captions may not always include a full description of the image and its contents, as they are typically used to enhance or provide context for a visible image.

However, captions can be more useful for accessibility purposes. Captions are especially helpful for images that might require a lot of alt text to accurately describe. Rather than creating long and less useful alt text, longer descriptions can be made using a caption. Then, the alt text can give a brief description of the image and suggest the user look to the caption for a more complete description and/or context.

Alternative text best practices

Creating good alt text isn’t a science — it’s more of an art. Too short and it may not give enough detail. Too long and it can be tedious. But here are a few things to keep in mind when you’re creating alt text.

1. Accurately describe the content and function of the image

People who use assistive technology rely on the contents of the alt text to give them not just what the image contains, but any context for the image if it’s not readily available. Depending on the complexity of the image, it may be better to provide context in the text of your content to avoid overly long alt text.

2. The shorter the better, but not too short

One of the main concerns with alt text is the length. Many screen readers* will read either all or none of the alt text as written. In other words, there is often no way for someone using an assistive technology to skip ahead to find more relevant content or to pause and go back to something they didn’t understand. If the most relevant content is at the end of your alt text, the user would have to listen to all of the irrelevant information before discovering why the image is included.

Give enough detail to accurately describe the image, but avoid minute details that don’t necessarily enhance the meaning of why the image was included.

A photo of back-end web site codes on computer monitor. Developer working on a web project in a busy office. There is a shallow depth of field in the photo. There are lots of code line in the file.

For example, in the image above, there are a number of ways you could describe it depending on what it’s trying to convey in the context of the surrounding content.

It would be tempting to just describe it as a computer screen. And, in some cases that might be enough. But, in an article about using screen blur to hide sensitive information, you may need to describe the image as a computer screen with the file tree blurred for privacy.

If the article was about a specific type of coding and the image was attempting to show an example of that code, you may need to go into more detail about what code is displayed.

Or, maybe the article is about the width of bevel on the computer screen, so there would need to be detail about that, instead.

In this sense, creating good alternative text is more of an art form rather than a science. Your alt text should be long enough to accurately describe the image, but not so long as to be cumbersome.

3. Use proper punctuation and spelling

Most screen readers* will read the alt text exactly as it appears, spelling and punctuation mistakes included. In programs like Microsoft Word, there is no way to check the spelling or grammar of your alt text, so you’ll want to be extra careful.

Similarly, you must use proper punctuation or your alt text may sound like a really annoying run-on sentence, or worse, not make any sense at all.

In fact, it’s not a bad idea to create a new document where you can compose the alt text using Word’s built-in spelling and grammar checkers and then, when you’re satisfied and it’s mistake-free, copy and paste it into the alt text window of whatever software you’re using.

Most modern browsers automatically check for spelling, so if you’re writing something in a content management system (CMS) or into Google Docs, it’s likely your spelling and grammar will be checked, but it’s good practice to proofread regardless.

Pro tip: Make sure your content reviewers also check to make sure your alt text is a correct description of the image, uses proper spelling and grammar, and is clear and concise when they’re reviewing the rest of your content.

4. You don’t need a title for accessibility, but it can be helpful for other reasons

From an accessibility standpoint, giving your image a title isn’t necessary. Most screen readers won’t even bother with it. However, the title will show up as a tool tip when someone browsing your website hovers over the image. The title can also help search crawlers better grasp the image’s content and purpose.

That said, you should never sacrifice clear and concise alt text that accurately describes the image in favor of scoring an extra point or two on the SEO scale.

5. Don’t include “image of,” “photo of,” etc.

When a screen reader encounters an image, it will tell the user that it has encountered an image. So, if your alt text included the phrase “image of,” the screen reader would say something like, “Image. Image of computer screen …”

6. If your image contains text, it must be included in the alt text

Because any text within an image would not be readable to a screen reader, it must be included in the alt text if it is relevant to the image’s meaning and context with the surrounding content.

A sign reading "ASK MORE QUESTIONS" in all-caps on a wall between two analog clocks.

Looking at the image above, depending on the context and intent, it may be necessary to describe in the alt text that the sign reads, “Ask more questions.” If it’s notable to better understand the intent, you may also need to describe that the text is in all-caps.

However, in an article about how to place a sign on a wall where the actual text of the sign isn’t important, you may just need to describe that the image shows a sign centered between two wall clocks.

As noted in the Alt text vs. captions section above, if an image contains a lot of text, it’s typically better to include this information in a caption instead. You may also include it in the surrounding text content. In these cases, you would want to note in the alt text that further information about the image is included in the caption or body of the text.

Because of the guidelines for keeping alternative text relatively brief, for images with markup and text like what you might create in Snagit, I suggest using the caption or surrounding text to describe the relevant markup and text. It will be far easier and useful for users.

7. Don’t rely on your accessibility checker

Many content creation tools, such as Microsoft Word and Adobe Acrobat come with useful accessibility checkers. They scan the content and look for typical mistakes content creators make that could render the content inaccessible. They’re great and you should definitely use them to check your content.

But there’s a problem: Your accessibility checker can check that alt text exists, but it can’t determine the quality of that alt text. For that reason, it’s a good idea to have your content reviewer also double-check your alt text content to ensure it’s useful and correct.

8. Images with links must include the link destination in the alt text

Another tennent of accessible content is that all hyperlinks should describe to the user where it will take them. For that reason, links like “click here” or “visit us” are typically a no-no.

In the same way, an image that functions as a link should also describe to the user where the link will take them. For example, if you have a button on your page that reads, “Download a free trial,” your alt text should read something like, “Link: Download a free trial.”

Alt text for charts, graphs, and tables

Charts, graphs, and tables present a particularly tricky issue when it comes to alternative text. Because they tend to present a relatively large amount of information, any alt text could end up being quite long and difficult to follow. As such, I highly recommend using a caption that accurately describes the chart or graph content and its relevance to the rest your content. Your alt text could then just describe the chart’s title and note that a full description of the content is available in the caption or text content.

How would you describe the chart above (from our recent article on our original research into workplace communications) to someone who can’t see it? Keep in mind that your alt text (or, more likely, caption or body of the content) would need to provide all of the relevant information so that they might understand it in the same way as someone who can see it.

In this blog article, because the information in the chart isn’t necessarily relevant to the point I’m trying to make, I could simply describe it as a complex chart of information about millennials’ preferences for visual tools at work. If this article was about the research, I would need to describe the actual content in alt text, or more appropriately in the body of the surrounding content.

Unlike images, most tables are accessible to screen readers. A user is able to move through the table to get the relevant information if they chose. However, alt text can provide a brief description of the table and an overview of what it contains so that the user can decide if they want to access the table or not.

Alt text and SEO

Alt text is essential for creating accessible content. However, it comes with a bonus: it also can help with SEO!

That said, the highest and best purpose for creating alt text is to improve the accessibility of your digital content. Trying to game the system by stuffing your alt text with inappropriate keywords or other irrelevant information can actually be harmful.

In this article from Google about image publishing, they note that they use image alt text to understand the subject matter of the image and how it relates to the rest of the content. They also suggest creating alt text that focuses on “creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page.” Google notes that alt text that is stuffed with inappropriate keywords or alt text that isn’t relevant to the image or the rest of the page content risks having your site seen as spam.

Similarly, Yoast, maker of one of the most popular WordPress plugins for SEO, recommends making sure you use your article keyword when possible and when appropriate, but they expressly say not to stuff your keywords into every bit of alt text.

While this is a good overview on basics for creating alternative text for images and SEO, it’s certainly not the last word not the subject. Many organizations have their own guidelines for creating alt text, while others may not even realize they need it at all!

Are you creating alt text for images included in your digital content? I’d love to hear your suggestions, ideas, and struggles!

*Note: Due to differences in how various assistive technologies handle images and alt text, this article is not intended to be a comprehensive overview of how all assistive technologies behave. Instead, consider the suggestions here a set of guidelines for ensuring that alternative text for images is accessible to the greatest number of people.

Posted in Tips & How To's
Author
Ryan Knott

Ryan Knott is the Public Relations Specialist for TechSmith.
Follow him on Twitter @ryanknott and connect with him on Instagram where you'll mostly find photos of pit bulls and food.
Fun facts:

  • Ryan is a nerd
  • Favorites: Alien (and Aliens), his dogs and iced tea
  • Secret talent: Coaching roller derby
  • Reading list: Anything by Neil Gaiman