cancel
Showing results for 
Search instead for 
Did you mean: 

Alternative Text - How and Why To Use It

Solution Provider

The "Alt" Attribute in HTML Content

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.

meaningful-click-message.png

 

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:

  • Screen readers are used by people who require special technology to interact with online content. Search engines use similar scanning technology to see behind the scenes of content. Alt Text can be read by screen readers and crawler bots in place of images. This allows the content and function of the image to become accessible to those who can't visually interact with it.alt-text-placeholders-mouseover.png
  • The alt tag's descriptive text is displayed in place of an image in browsers or email previews if the image file isn't loaded or when a user has chosen not to view images. It can also show when someone mouses over the image in a web browser.
  • Your description should provide meaning for images which can be read by search engines or used to enhance content around the image that page context can't provide alone.

 

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/

How Much is Too Much?

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.

 

How To Add Alt Text in Constant Contact

 

imageeditbutton.pngI'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.add-text-while-upload.png

add-text-from-library-customize-button.png

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.

PaulaSUtah

Written by Paula Sageser. Paula started her own business to help other small business owners navigate through the Wild World of the Web. Her day job is building and troubleshooting websites. As a SCORE mentor, she teaches classes in Social Media, Email Marketing and Purposeful Websites. As a blogger, she has written gaming and book review blogs for fun. As a blogger here for Constant Contact, you can expect her to blend her knowledge of website design with tips and tricks for connecting the dots between sites, social and email.

5 Comments
Occasional Participant

I appreciate your good blog about Alt Text. It helps me clear this section 

Occasional Contributor

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!

All Star

Hi Paula,

What is the best way to indicate that an image is purely decorative? Should I leave the description blank...? Thank you.

Solution Provider

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.

SciMyWorld
Not applicable