How to write Alt Text for WCAG 2.1 Compliance and Screen Readers… unfortunately, it’s more complicated than you think. We created these guidelines for our own website clients to help them understand the complexities of Alt Text, how it impacts screen readers, when to write alt text and when not to write alt text, how to write alt text for complex images like resort maps and what to do if you are told to remove alt text that exists for SEO purposes.
Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. Alt text will be displayed in place of an image if an image file cannot be loaded. In addition, alt text provides image context/descriptions to search engine crawlers, helping them to index an image properly.
How to Optimize Alt Text
Describe the why of the image not the what of the image as specifically as possible. Alt-text is, first and foremost, designed to provide text explanations of images for users who are unable to see them. For example, you don’t describe a resort map with “resort map” but rather tell what it shows for the sighted person.
Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it’s advisable to keep it to that character count or less unless the image is complex like a resort map or infographic (see below)
Use your keywords. Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image if it makes sense to do so, include your keyword in the alt text of at least one image on the page.
Avoid keyword stuffing. You will see negative results if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it, this is not good for SEO and is not good for readers. The alt text must describe why the image is there and the intent.
Don’t include “image of,” “picture of,” etc. in your alt text. It’s already assumed your alt text is referring to an image, so there’s no need to specify it.
Don’t forget longdesc=””. Explore using the longdesc=”” tag for more complex images that require a longer description.
When You Shouldn’t Use Alt Text
There are cases where an image should have a blank alt tag. These instances are:
- Decorative images, a pretty horizontal bar, it could be a photo of a person that holds no meaning to the page, it could be a design element or a graphic. Sometimes designers will use a person pointing toward a form or a button that requires action, that is purely decorative so describing a stock image that is there purely to drive the eye to a section of the page is indeed decorative. Eye candy images that are not related to the product or service offered.
- Images that are part of links where there is text below the image that is also part of the link
Special Cases: When you aren’t sure if you should use Alt Text
- Is it really decorative? If you aren’t sure if the image is purely “decorative”, write a description, it will still pass.
- Maps – Campground Maps, Resort Maps. Use common sense to try to describe the layout to the best of your ability. For example, camp spaces 1-50 (evens) are on the left hand of the road traveling north with a bathhouse in the general area of x-z. Text alternatives need to describe “why” and not what. Make sure there is some bearing for the reader, ie: “if you are coming through the main gate…. Xyz is to the left”
- Infographic style images: If there is already a blog post that describes what is in the infographic, there is no need for alt text as that would create redundancy. If there is not a blog post, either write one or include the information in the alt text.
- Think Text Alternatives vs. Alt Text: Don’t think I must have “alt text” think is there a text alternative on the page for what is already in the photo. If so, alt text would be redundant.
- What about my fabulous SEO Alt Text? If your website is ranking high and you don’t want to risk removing all the redundant alt text, experts recommend adding role=presentation and keeping the alt text.You can learn more about what is considered a decorative image here. This decision tree can help you determine when to use alt text or not.