ALT attributes have been a part of the HTML markup language for a very long time. The most widely used application for them currently is within the image (IMG) tag. While the ALT attribute can be used in other applications, our focus of this post will be on the IMG tag.

What are ALT attributes, why are they important to HTML and SEO? And how can you use this powerful attribute to enhance your websites? Stay tuned as we dive deep into the world of the ALT attribute.

What is an ALT attribute?

ALT attributes provide a text alternative for an element. As mentioned above, the most often used application of the ALT attribute is for the IMG tag. How might having this alternative be useful? ALT attributes should be thought of as a way to explain an image to a blind user. These attributes are also indexed by search engine crawlers to determine what an image is or what it is representing. According to the W3C, for HTML5 the ALT attribute is a requirement for image tags for valid markup except for rare circumstances.

Why is the ALT attribute important?

The ALT attribute contributes to a variety of important functions. The W3C provides several different scenarios where the usage of the ALT attribute is beneficial to users:

  • They have a very slow connection and are browsing with images disabled.
  • They have a vision impairment and use text to speech software.
  • They have a cognitive impairment and use text to speech software.
  • They are using a text-only browser.
  • They are listening to the page being read out by a voice Web browser.
  • They have images disabled to save on download costs.
  • They have problems loading images or the source of an image is wrong.

As you can see, the ALT attribute plays a huge role in making certain that all users are able to understand your webpage and the content on it.

The ALT attribute is also playing an ever increasing role in SEO. Yes, this attribute is now essential in increasing your website’s search engine ranking. Why is that? Think about the above list and what the ALT attribute does for users who cannot see the images. Search engine spiders have the same problem as blind users, they cannot see the image! These web crawlers must rely on the ALT attribute to correctly describe the image. The ALT attribute is not just a requirement for valid html, it is now a power SEO tool!

What goes in an ALT attribute for an image?

Now that we’ve discussed what an ALT attribute is and why they are important, we need to delve into the content of the ALT attribute. There are several guidelines provided by the W3C for appropriate use of the ALT attribute.

  • Provide the same informational content as the image.
  • Where an image performs a specific function, such as a graphical link, provide information about its functionality.
  • Be succinct as possible while still conveying equivalent values. Short text that describes its purpose or gives an overview will often suffice.
  • Write suitable alt text according to context. The same image in a different situation may need very different alt text.
  • Avoid redundant alt text. An example of this would be repeating the same text in your document, as well as in the alt attribute, and is unnecessary.

This last point is very important to consider. Some inexperienced and unethical webmasters have attempted to add in superfluous and misleading text or keywords in their ALT descriptions. This tactic is known as keyword stuffing. From my work as a search engine evaluator I can assure you that this is a very bad idea. These websites are flagged for keyword stuffing and quickly lose their search rankings. Yes, websites are penalized for keyword stuffing. Do not do this! The search engine crawlers view this as spam and it will work out to the detriment of your website.

Let’s summarize this section of what goes into an ALT attribute for an image.

DO: Use descriptive text to explain to a user what an image’s purpose is on the webpage.  Example: An image of a question mark should have as its ALT text “Help”

DON’T: Stuff keywords hoping to get better keyword density. Example: An image of a golden retriever having the ALT text “dog puppy pup pooch gold goldy goldie golden retriever AKC bowwow flea bag”.

Putting it all together: How to use the ALT attribute to benefit your website users and SEO.

The ALT attribute should be included inside the IMG tag. To see the ALT attribute in use we will refer to a page on my Fine Art website that relies heavily on images.

The page includes several images of one specific piece of artwork. I could have simply used the title of the piece for each ALT description, but instead each one is more descriptive. The “scene” of the artwork on a wall has its own text and the close up shot has its own ALT description. Here is the link to the page so you can check out the source code.

First we have the entire image tag:

[html]<img src="http://fineart.stanragets.com/shop/images/2426/?550,550,0,100,100,1133717897" title="Return of the Tile by Stan Ragets" alt="Return of the Tile by Stan Ragets" width="550" height="413" />[/html]

From this we can dissect the alt attribute and see how it is applied. Please ignore the extra numbers at the end of the src attribute as these are specific to my website.

[html]alt="Close up of Return of the Tile by Stan Ragets"[/html]

Here we can see a real world example of how the alt attribute is utilized just as any other attribute of an html tag.

Therefore when you are adding images in straight html you can and should utilize the ALT attribute. It’s as simple as the following:

[html]<img src="location/of/your/image.jpg" alt="Descriptive Text of Your Image" title="Title of the image" />[/html]

If you are a wordpress user, you too can optimize your images to include the ALT attribute. This option is available inside the media uploader/library. In the following image the highlighted area shows where to enter your ALT text.

Wordpress users can enter ALT text here

Where to enter ALT text in WordPress for images.

Tips and Examples

Examples:

  • If a search button is a magnifying glass or binoculars its ALT text should be ‘search’ or ‘find’ not ‘magnifying glass’ or ‘binoculars’.
  • If an image is meant to convey the literal contents of the image, then a description is appropriate.
  • If it is meant to convey data, then that data is what is appropriate.
  • If it is meant to convey the use of a function, then the function itself is what should be used.

ALT Attribute Guidelines:

  • Always add alt attributes to images. ALT is mandatory for accessibility and for valid XHTML.
  • For images that play only a decorative role in the page, use an empty alt (i.e. alt=””) or a CSS background image so that screen reading browsers do not bother users by saying things like “spacer image”.
  • Remember that it is the function of the image we are trying to convey. As an example, any button images should not include the word ‘button’ in the alt text. They should emphasize the action performed by the button.
  • ALT text should be determined by context. The same image in a different context may need drastically different ALT text.
  • Try to flow ALT text with the rest of the text because that is how it will be read with adaptive technologies like screen readers. Someone listening to your page should hardly be aware that a graphic image is there.

Image SEO Tips

  • Choose a logical file name that reinforces the keywords. You can use hyphens in the file name to isolate the keyword, but avoid exceeding two hyphens. Avoid using underscores as a word separator, ie.  “brilliant-diamonds.jpg” instead of “brilliant_diamonds”.
  • Label the file extension. For example, if the image search engine sees a “.jpg” (JPEG) file extension, it’s going to assume that the file is a photo, and if it sees a “.gif” (GIF) file extension, it’s going to assume that it is a graphic.
  • Make sure that nearby text is relevant to the image.