Behind the scenes of the content that is displayed on web pages are lines of code that explain how that content should be displayed. Email templates like those used in Constant Contact have the same behind the scenes code structure to control visual appeal and structure when viewed on different devices. Because image content can't (yet!) be scanned and translated into readable form, source code relies on special attributes to provide an alternative description for the image. Most times those are just the file name by default, but you can and should control what that description says. One way is through useful file names, but the other is by adding your own descriptive alternative (alt) text.
Alternative text is the words used to explain non-text content, mostly for web pages but also for HTML formatted email messages like online newsletters. Anything that can be displayed in a browser or email program has this formatting.
Alt text has a few functions:
Content creators need to realize that text must be provided to readers to give them the content and function of images independent of being able to see them.
The main question you should ask yourself is, “Why is this image used? What message it supposed to convey?” "What context is the image used in?" Don’t bother with saying “image of” before the description. Don’t try to re-convey the meaning that is already in text used around the image.
Here is a good site with more examples of creating alt text: https://webaim.org/techniques/alttext/
Just like our subject lines, we need to be aware of the length of our alternative text. A good rule of thumb for alt text is to keep it between 5 and 15 words total. Some tests have shown that Google only counts the first 16 words in the alt tag, so it is a good idea to be SEO friendly too.
The longer your alt text, the more difficulty text browsers will have in reading it. It's tempting to just copy/paste long sentences from your content and use it as alternative text (many times this is done because someone is trying to SEO it and stuff the tag with keywords), but if you keep Alt tags short, meaning is not lost and content will download faster.
Some screen readers have limits and mobile previews will also limit how much is displayed. Mousing over an image may not display very long descriptions either. These are all good reasons for keeping the length of "alt" attributes to a minimum. At the very least, shorter than 125 characters will help you avoid problems.
I'm going to briefly show where you can put your alt text while adding images to an email you create in your account. You can go back and edit images already stored in your library if you want to customize them and add descriptions to existing content too.
From an email template or when you edit the placeholder for an image, you can select from your library or upload one from your computer. After you upload an image to your library, you will see a box below the image file name that shows "description." This is where you can type in your alt text.
You can also add descriptions to images in your library. Click the "customize" button to update your images.
Accessibility is very important for a great user experience. It helps when someone requires special technology to browse content or is on a mobile phone viewing a web page or an email. Be sure to provide usability by taking the time to create meaningful alternative text descriptions for your images. Your users, and open rates, will thank you.
Yeah, good alternative text helps visitors navigate the site. To figure out the images that need alternative text, evaluate which ones add clarity to your content by asking what purpose it serves (the “why”) and its relevance to your audience. Very informative post. Thank you!
What is the best way to indicate that an image is purely decorative? Should I leave the description blank...? Thank you.
The convention with website markup is alt="" which tells a screen reader that the image can be ignored. For the descriptive text in your constant contact library, leaving it blank should act the same as the double quotation marks.