As you include photos and other images on your web pages, it is important that you include "alt" text. This is alternative text that will display for users with disabilities, who may use a screen reader application. It is important for web accessibility compliance and is a good habit to get into for effective SEO -- and a task that is easy to overlook. Including alt text is part of a healthy website and a successful SEO strategy.
However, this is trickier than it sounds and should be carefully done.
ALT TEXT: THE BASICS - How to Write Alt Text
The good news: not every image should have a value set for its alt attribute. But each image should have the alt text code (alt="").
When you are using alt text, a good rule of thumb is to keep it at fewer than 125 characters. If you write longer, the text will likely be cut off by screen-reading tools.
WHEN TO WRITE ALT TEXT
| IMAGE |
YES |
NO |
The image is text only.
|
If the text in the image is relevant to the surrounding content write the alt text verbatim to the graphic’s text.
|
If the text in the image is not relevant to the surrounding content leave the alt tag on the image empty.
|
Logos
|
Only write the name of the company. Do not include "logo"; it is not necessary
alt= "LRS"; not "LRS logo"
|
|
The image adds to the content and adds value to the other text. It is not decorative.
|
The text should describe the photo. Keep the text minimal. See below for more detail.
|
|
The image does NOT add any value to the rest of the content. "Presentation only" images.
|
|
Leave the alt tag empty. Screen readers will bypass the image.
|
The image is next to the related text.
|
|
Leave the alt tag empty. Don’t repeat content.
|
Decorative Images /Window Dressing/Eye Candy:
Images may be decorative when they are:
Visual styling elements (decorative borders, corners);
Reflects the text in the article without adding additional information.
|
|
Leave the alt tag empty. Alt text would be duplicative or pointless – it would not add value for the user.
|
For a quick learning map about alt text, go to www.w3.org/WAI/tutorials/images/decision-tree/.
HOW TO WRITE ALT TEXT for SEO
When you determine that your image needs alt text, keep in mind the content and context of the image. Here's how to add alt text. In most cases, the alt attribute should:
- Describe the content and purpose of the image. Use both the image's subject and context to guide you. Also, be representative of the topic of the webpage it's supporting. Be as specific as possible.
- OK alt text: alt="Woman leading a meeting in a conference room."
- Better alt text: alt="CEO Susan Smith leading the marketing staff at the Smith-Marketing Headquarters in Springfield."
- Be short. A few words are fine (<125 characters).
- Don’t be redundant or provide the same information as the text around the image.
- Don’t use the phrases like "image of ..." "picture of" or "graphic of ..." The HTML source code indicates to screen-reading tools that the object is an image.
- Include keywords carefully. Use natural words and synonyms. Don’t stuff the keywords – make sure they make sense with the picture.
- For multiple, yet similar images: Include a core keyword in the lead image.
- Use the target keyword in your image file name.
What's the difference between an image description and alt text?
Alt text is written for screen readers. It usually provides basic information. Imagine if you couldn't see the image. How would you describe it to other people? Descriptions give more detail.
Why Do You Need Alt Text?
Yes, adding alt text is an extra step when you're working on your website. It's easy to overlook or skip to save time. But alt text is a must for compliance with website accessibility standards (WCAG).
Including alt text, when done carefully and purposefully, can improve your SEO, giving you an extra place to add keywords for search engines to see. However, make sure that the alt text is natural - don't ever "stuff" keywords.
These alt text basics should help give you an understanding of alt text and why it is important. Although it takes an extra step, it is worth it to create a top-notch business website.