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: 26% [?]
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
I also appreciated the description. Thank you.
Filipina Heart´s last blog ..Philippines Typhoon
I didn’t even know what it was for, thank you for the explanation.
Flame Graphics´s last blog ..Couple
[...] 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 also really concerns 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.
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.
While doing SEO, and basically while doing On-Page optimization i always focussed on alt attribute so that to add the images where it is necessary.
Thanks
Nimmy@Guaranteed SEO Servicess last blog post..Google Dance
I knew that alt tags were used in-case image link is broken, or to describe an image.. Spreading of Viruses, I never knew! Thanks for the share
Yoga Mat Review´s last blog ..Yoga Mat Review: Picking The Best Possible Yoga Mat.
I don’t know that ALT can prevent viruses. I usually use it so that I will not forget what image I use for such portion of the page.
Sulumits Retsambew´s last blog ..I am really tired of the days work. I go …
This is a really informative post. Will take all the points you’ve mentioned into consideration. It was nice to have read through this, especially to understand that alt tags actually help search engines understand what your images are…
Good explanation about alt attribute. Thanks for good information.
Your blog is full of funny stuff. Most of all threads are great. I like your blog very much.
Your website is very useful. Thanks for sharing.
Yea thank you again Sue.
Filipina Heart´s last blog ..Philippines Typhoon
I love to use the alt attribute for providing a descriptive text for images. It helps me to speed up the page load time.
I didn’t know there are so many other benefits.
Thanks for the post.
James @ vintage t shirts ´s last blog ..“Something Old” or “Something New” – A Vintage Wedding Dress Buyer’s Guide
Good tips for alt attribute. Now i’ll add alt attribute to all images. Thanks.
Your images are also a lot more likely to be ranked in google image search if they have accurate alt tags on them. Good info
I love to use the alt attribute for providing a descriptive text for images. It helps me to speed up the page load time.
yes i agree, i am always using alt attribute to all of my images. it will help me to optimize that images into google images.
Thanks for great tips.
I wish I had come accross this when I was first learning html, you can try and read as much as you want on the internet and nothing has made as much sense as you have!
Excellent explanation! Thank you for sharing.
Now I know the importance of the Alt Attribute.
What a nice summary of the alt attribute and why it should be used. People should take care to make it accurate and concise, particularly to assist those with disabilities.
Nice summary of the alt attribute and why it should be used. People should take care to make it accurate and concise, particularly to assist those with disabilities.
I agree Alt tag is must for getting SEO advantage.. specially in google image search.
2D 3D Animation India´s last blog ..Create a valid RSS feed for any page on the web!
Title tags are the most important IMO.
-Jack
“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”
We’ve been able to get large amounts of traffic through image searches. The alt attribute is huge!
Kennewick Real Estate´s last blog ..Kennewick Real Estate
very nice informations thanks. laptop
very nice informations thanks. laptop
treppenlift anbieter
Hi sue.Thank you for a very useful post.Really,at these years i don’t know the most specific uses of the alt attribute.This blog is really simple and very understandable to the readers.Kudos to ur work and continue ur good work.
I always use alt attribute for my wallpaper blog.
It’s very useful for seo of google images. I get lot of visitors from google images.
heri@flood pictures´s last blog ..Inspecting The Flooded House
I’m really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Yes, it is very usefull for google search images.
mircea ottawa wedding photography´s last blog ..Ottawa wedding photography 08
thanks for share, it’s good for me because I have a wallpaper site, and must use ‘alt’ in the picture
Free Music News´s last blog ..Linkin Park Wallpaper #10 | Reanimation Wallpaper
Thanks, great post
Ground shaking content i get form your blog. Very nice post about “Alt” attribute. Thanks for your beneficial information about testking, testking 642-062 and testking 642-067 certifications. These are the best certifications in the world.
Excellent explanation! Thank you for sharing.
Great post. Although I tought the only reason people use alt tags was for SEO purposes. Guess I am wrong.
Thanks
Ryan
Free sat nav
Looks like I’ll need to do this for my website as well. This is great information, never knew the alt tag was meant for all this other things
Moy Photography´s last blog ..Annie and Chance – A Wedding Shoot Around San Francisco