alt to the title to the title to the alt

The alt tag and the title tag are the unsung heros of accessablity for images. Years ago a design/developer would have to manually write the alt text and title tag for every image and 9 times out of 10 the text would be the same. Now-a-days the process has become much easier with the use of jQuery.

Let’s say for example, you are a designer that’s in the good habbit of using always using alt text with your images but you want to duplicate the text in the title attribute. Now, if you were really up for the task you could go through every page and manual insert the title and copy the text from the alt attribute and paste it inside the quotes of the title tag. Needless to say, this would not only be a rediculously time consuming way of implemeting this change but an absolutly not an efficient way of doing things. Well, as fortune would have it you write a few lines of jQuery to and achieve

jQuery breakdown

This script inserts the alt text into the title text or the title text into the alt text and if for some reason you are a “lazy” designer/developer and didn’t insert an alt text or a title text it will take the url for the source file and insert that into the title attribute.

Okay, let’s say I’ve got 4 images. The first has an alt attribute, but no title. The second has both an alt and a title. The third is just a copy of the first. The last has no alt or title.

<img src="images/accept.png" alt="Accept" /><br />
<img src="images/application_error.png" alt="Error" 
title="Error" /><br />
<img src="images/accept.png" alt="Accept" /><br />
<img src="images/application_error.png" /><br />

I began looking at jQuery selectors to see if it was possible to find all images that were missing a title attribute.
This can be done with the following selector

img:not([title])

Reading left to right we have: All img tags NOT having title as an attribute.

Now I needed to modify it so that I could set the title attribute to the alt value.

$("img:not([title])").each(function() {
 $(this).attr("title", $(this).attr("alt"))
})

This worked like a charm, but obviously, only worked in cases where the alt attribute existed. Many times the filename of the image can give you a clue as to what the image does. I don’t know about you, but I will often run across web apps that make use of tiny icons (with no title attribute) that leave me scratching their head as to their actual purpose. I modified the code a bit to use the src attribute when alt was empty.

$("img:not([title])").each(function() {
 	if($(this).attr("alt") != '') 
	$(this).attr("title", $(this).attr("alt"))
 	else $(this).attr("title", $(this).attr("src"))
})

So in the end the 4 images would render identical alt and title value. If the image didn’t have an alt or title value it will add the images src to those values.

<img src="accept.png" alt="Accept" title="Accept" /><br />
<img src="application_error.png" alt="Error" 
title="Error" /><br />
<img src="accept.png" alt="Accept" title="Accept" /><br />
<img src="application_error.png" alt="application_error.png" 
title="application_error.png" /><br />

Live demo on MedlinePlus the Magazine

• Comments [1]
• Digg it!
• Facebook

About the Author

I'm H Matthew Schoemaker, a self proclaimed trendy nerd who's always researching what's the new latest greatest technology. Currently I'm a middle man between web designers and web developers in a large government agency.