Top Ten Best Practices for Using Alt Tags on Images

There’s No Alternative to Using Alt Tags

Are you using alt tags for all of the images on your website? And if so, are you using them correctly?

Many people entering content through a CMS like Wordpress might see the alt tag field, but not know what they should be putting in there or why. Lots of folks just leave that field blank.

That’s a shame because alt tags (short for alternative attributes or text) serve an important function. They’re also required for meeting the HTML standard and web accessibility requirements.

In situations where images can’t be seen by the reader—either because they have turned off images in their web browser or are using a screen reader due to a visual impairment—alt tags ensure that no information or functionality is lost. (See our recent post on ADA compliance.)These tags also appear before your image has fully loaded on the page.

Additionally, alt tags serve an important SEO purpose and can help users find photos from your site in an image search, driving traffic to your website.

Here are some of the rules you should follow for alt tags:

1. All images should have an alt tag – even if it’s a null tag.
2. Use a null alt tag (alt="") when labeling spacer images or design elements that don’t need to be read. This will allow screen readers to skip over/ignore those elements. (Note: using a null tag is not the same thing as using no tag at all.)
3. Your alt tag should be more descriptive of the image content than the image’s file name. For example: (img src="dog.jpg" alt="beagle puppy chewing sock").
4. If your image performs a function, you also need to describe what it does (“screenshot showing a 404 error” or “submit form”).
5. When an image contains only text, the text being displayed can usually be used as the alt tag. An example of this would be a navigation button, such as Products. The content would be identified in a screen reader as a link, so there is no need to say “Link to Products.”
6. If you are showing an image of a specific product, publication, or person, use the full name. (Green and white Apple Watch band, Cover of 2016 Buyer’s Guide, Joe Smith, CEO.)
7. Try to limit alt tags to no more than 5 or 6 words.
8. Don’t be redundant. Don’t just repeat the surrounding contextual copy for your alt tag, or stuff alt tags with keywords.
9. Don’t use the phrases “image of” or “graphic of” to describe your image. It is apparent to the user that what is being described is an image.
10. For indexing purposes, it can be helpful to include the page’s keyword in one of your images alt tags on that page. Again, no need to repeat it everywhere.

If you follow these best practices consistently, you can meet the HTML standard, ensure your site’s content is accessible to everyone and have your images indexed by the search engines.

Need some more help? Whether you are looking for drive more traffic to your site, engage more customers or capture leads, we’ve got you covered. Let’s Talk.

Sources: WebAIM, Yoast, MattPolsky.com