Image Alt Tag – Image Alt Attribute
Web Page Mistakes

Do you use the image alt attribute (mistakenly called the alt tag by some) properly on your website?

By not using the image alt attribute (image alt tag) you are missing out servicing the visitors to your website that have images turned off, those who use assistive technology to surf the Net and the search engine optimization benefits of the image alt attribute.

Image Alt Tag vs Image Alt Attribute

If you do a Google search on the phrase image alt tag you will see about 421,000 results are returned which include some search engine optimization articles, marketing articles and well used HTML coding websites.

Doing the same search using image alt attribute you will see about 188,000 results returned which include Official Google Webmaster Central Blog: Using ALT attributes smartly and the W3C (World Wide Consortium) Objects, Images, and Applets in HTML documents (the W3C is the organization who writes the specifications for HTML coding and other Internet related specifications).

Which is the right phrase to use?

An image has an alt attribute, not an alt tag.

If you look up the img tag (which is really called img element) in the HTML specifications you will see that alt is listed as an attribute.

The image alt attribute is defined as:

“Attribute definitions

alt = text [CS]

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.

…let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc….

Reference: 13.8 How to specify alternate text

This reference was accessed by going to the Index of Attributes, a part of the W3C Recommenations.

This article uses image alt tag in it’s title so those who incorrectly use this phrase will still find our article and learn the correct way to use the image alt attribute.

Using the Image Alt Attribute

When used, the image alt attribute displays a tooltip in Internet Explorer with the words contained in the image alt attribute for the website visitors when they place the mouse over the image. Not only is this helpful to your website visitors who use Internet Explorer, it is helpful for the visitors who have images turned off and it makes your site accessible. The words in the alt attribute are displayed in the place where the image is placed for those with images turned off and is read out to those who use assistive technology to read web pages.

IE 8 does not display alt text in a tooltip

A lot of websites do not use the image alt attribute or use it incorrectly. So how do you use the image alt attribute properly?

The image alt attribute is to be used to supply information about the image.

“Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.”

Reference: HTML 4.01 Specification – Objects, Images, and Applets in HTML documents

Provide Alt Attribute for Images

The correct way to insert an image in your web page when coding in HTML 4.01 is:

<img src="imagename.gif" width="10" height="10" alt="Image Description">

Reference: HTML 4.01 Basics Simplified

To insert an image when using XHTML coding it would be:

<img src="imagename.gif" width="10" height="10" alt="Image Description" />

where:

src="imagename.gif" is the path to the image on your web server
width="10" is the width of the image
height="10" is the height of the image
alt="Image Description" is the image description

Image Alt Attribute Description

The image alt attribute description should be a meaningful description of the image. The description needs to make it clear what is in the image.

What the Image Alt Attribute (a.k.a. Image Alt Tag) is Not

What the image alt attribute is not, is a place to stuff keywords!

Not only is this useless information to your visitors who have images turned off, it is useless to those visitors who are using another means to access your website.

Search engines also frown upon keyword stuffing.

Alt Attribute and SEO

Reading articles about search engine optimization (SEO) you will see recommendations to use the alt attribute (alt tag) to improve the SEO of your web pages/blog.

SEOmoz published an article October 22, 2009 showing that using the alt attribute does benefit your search engine optimization program.

“…consistent suggestion to use images with good alt text that employ your keyword term/phrase….”

Explaining (Some of) Google’s Algorithm with Pretty Charts & Math Stuff

But this article doesn’t clarify that while the alt attribute does improve your on page search engine optimization, the text in the alt attribute needs to be also useful to your users.

“…while using keywords in alt attributes may help your web site rank, it can also result in a significantly less accessible web site, if applied poorly….

Best practices: keywords in alt attributes

Be a Responsible Website Owner

Be a responsible website owner and have your images include the image alt attribute. Insist on it if you are having someone else build your website.

Note: the alt attribute should be blank for decorative images. e.g. an image as part of your web page’s visual design. Some will use this alt attribute to “keyword stuff” which is useless to those who cannot see the image and can cause you to be penaltized by the search engines for keyword stuffing. Check your web design for this issue.

Use the image alt attribute the way it was ment to be used, to provide useful information to your website visitors no matter how they access your website.

Remember that the correct way to refer to the alternate text provided for an image is referred to as the image alt attribute, not image alt tag.

As pointed out above, your alt attribute text can contain keywords as part of your on page SEO program but also make sure that the description is useful to those who cannot see the image.

Additional Reading

Alt text and form buttons set as images – “…using the alt attribute when coding your input type=”image” elements in your forms….”

The alt and title attributes – “…alt attributes (popularly and incorrectly referred to as “alt tags”)…The alt attribute (yes, it’s an attribute, not a tag)…”

HTML <img /> tag – “…Firefox uses the alt attribute the way it’s meant to be used, like an alternative text if the image won’t load, not as a mouse-over text….”

Matt video: ALT attributes for images – “…“IMG” is a tag, but “ALT” and “TITLE” are attributes of the IMG tag….”

Beyond ALT Text: Making the Web Easy to Use for Users With Disabilities – 75 Best Practices for Design of Websites and Intranets, Based on Usability Studies with People Who Use Assistive Technology by Kara Pernice and Jakob Nielsen.

Copyright © 2005 - 2008 Web Page Mistakes. All rights reserved.

This entry was posted on Monday, April 10th, 2006 at 3:14 am and is filed under Accessibility, HTML Coding, Web Graphics . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.