When discussing accessibility techniques in blogs, I mentioned the importance of using the “alt” attribute. Here I am going to define it further, show you the positive aspects of using “alt” and how to use it to its best advantage.. Although alt is used for other page elements, such as image map areas, I am concentrating on its use for images.
Definition of the alt attribute
The alt attribute is a method of providing a descriptive text alternative for images. Example:
<img src=”http://www.yourdomain.com/your-image.jpg” alt”this is the alt text” />
Reasons for using the alt attribute
- To display a text equivalent for an image in browsers where images have been turned off.. Reasons:
- To speed up page load time for users on slow dial-up connections.
- To avoid viruses that can be spread through image files, where the user does not have adequate virus protection.
- To save bandwidth when users are concerned about using up download limits.
- To save download amounts if using a pay per download scheme (e.g. when connecting to internet via a mobile phone)
- To aid browsing when using a handheld device e.g. PDA, mobile phone, electronic books, Blackberries.
- Accessibility purposes for users with disabilities:
- For those who use assistive technologies such as screen readers which convert text-to-speech, sound icons, or a braille output
- For those with color blindness which precludes them from distinguishing detail in images.
- For those using audio-based browser technologies
- Search engine optimization:
- Most search engines interpret the meaning of objects by analyzing their alt attribute. They cannot see images!
- Use keywords in alt text to help with indexing and pagerank.
How to add alt text in blogs
In Blog Posts:
Blogger - In your “Create” post screen upload or point Blogger to your image location using the “Add Image” icon in either the visual or html post tabs. Once this is done look in the Edit HTML window and you will find an empty alt attribute which looks like this alt=”" . Add your text in between ” and ” e.g. alt=”this is the descriptive alt text”
Wordpress - add your image using the image icon in the new post visual tab. Add your “alt” text in the Image description box of the Insert/Add Image window.
Elsewhere in your blog:
If you are manually adding an image to your blog via widgets or straight html coding add the alt code to the image tag: For example:
<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” /> will produce:
If you are using IE, hovering over the image will show this text. Another attribute, “title”, can be used for displaying image description and this does show up in Firefox.
Tips for the text in the “alt” attribute
- Keep the text short - if too long it may break page layout where images are turned off.
- Ensure the text is meaningful and adquately descriptive for accessiblity purposes or where graphics are not being displayed.
- Include keywords for search engine purposes but still take account of the first two points above.
- If the image is a text image, use the same text for the “alt” attribute - e.g for blog titles
- Use CSS background images for bullets, lines or other decorative elements where descriptions are not necessary to make sense of the page. If you need to add them directly to your page you can leave the alt tag empty (alt=”") or, for example, use alt=”*” for a bullet and alt=”—” for a seperator.
- Use the “title” attribute in addition to the “alt” where you want to add longer descriptions. Example:
<img src=”http://www.sueblimely.com/images/icons/ifollowblue.jpg ” alt=”You comment, I follow” title=”Your comment backlink is followed by search engines.” />
Checking out your page:
If you wish to see how well you are using the alt attribute,
- Turn off images in your brower - see if your alt attributes make sense -try reading your page out loud.
- Convert your blog post into audio using a service such as Odiogo
I guess my blog topics do not lead to relevant Yahoo Shortcut images but as this was suggested for the term “alt”, I liked it and appropriate or not I am using it 
Popularity: 30% [?]
Excellent and thank you.
I always wondered what the actual importance of the Alt Attribute was.
I find myself coming back to your teaching blogs all the time Sue because you speak in lay peoples terms - I love it.
Megan from Imaginif’s last blog post..Imaginif and All for Women formalise sistership
Thanks Megan - I sometimes wonder how understandable I am. When you have been doing something for a while it is often hard to get back to the basics and to miss important bits out.
Please let me know if there is anything else you need to know about although your site is magnificent already.
intelligent gurl
abraham’s last blog post..Contradiction between Adsense and MyBlogLog Stats
Hello - my first visit here - via Entrecard.
I have been blogging for 2 years and this is the first sensible description of the “alt” attribute I’ve seen. Thanks for this info!
cheers,
mo @ It’s A Blog Eat Blog World
mo’s last blog post..try it for yourself
[...] recently posted on how and why to use Alt tags. Blogging Mix has also published an article on the subject Blogging Tips - Importance Of Using ALT [...]
[...] The “Alt” Attribute - Sueblimely Does Image Search Traffic Convert? - Search Engine Journal What Matt Cutts has to say about Alt Text (Video embedded below - 3 minutes) [...]
Sue,
Excellent article, spot on, but what really made me comment was the Flickr image. Fantastic!
Stephen Cronin’s last blog post..Creating A JavaScript Array Dynamically Via PHP
Thanks Stephen, glad someone does not think me bananas for including it
Matt Cutts from Google recommends that you include the file extension in the ALT attribute because it makes it explicitly clear that it is alt text not page text.
I am a big fan of using the ALT tag on images to help push your key words for search engines. It also brings in extra traffic from google image search…which is well worth the little bit of extra effort it takes to add a line or two of code to your blog post. Cheers.
Simons last blog post..Free Terminator Vector Image
What really conserns me is that some web developers, due to the fatal mistake made by the IE dev’s a few decades ago, thinks that alt is used to diplay tooltips not only on images, but all over the place. On form elements, links, you name it. I shit you not, I’ve seen it been done.
Engineering Collegess last blog post..Top Engineering Colleges in Mumbai
The alt attribute is a kickass way to get search engines to index your images and build kw authority.
This is one thing I always tend to forget about. Hopefully this post will inspire me to do otherwise. Thanks.
Quite a nice blog you have, I hope to visit it often.
“alt” is huge! We have done many Squidoo lenses and have garnered much traffic from the alt tag for images. For instance, search in Google images for “Save The Children”
Kennewick Real Estates last blog post..Colleen Lane: Cool And Composed
I’ve known about the alt tag for a while.. But till this day… I am still unsure of which to use… Alt vs Title that is… but for the looks of it, I’d say that Alt is still the primary one you should use.
Till then,
Jean
Because of the alt attribute, one of our Squidoo lenses is receives 1000+ hits per week. Go ahead, do an image search for ‘angel’ and you’ll see our Squidoo angle usually in one of the top 5 spots, if not number 1.
Kennewick Real Estates last blog post..Kennewick WA Homes for Sale
The use of Alt attribute is very important while doing SEO as this is the most important factor while doing On page SEO.
Thanks
Nimmy@Guaranteed seo servicess last blog post..Ethical SEO Factors
Yes alt attribute has very significant value in SEO and its really good for on page.