One of the first tips I wrote for this site was about how (and why) to add alternative text to your images. Knowing when and how to use good alternative text for an image, and when to use the "blank" alternative, is one of the most important things you can do to make your web page more accessible and less annoying for your visitors who have visual disabilities or who find it easier to use browsers without images showing - such as mobile phone users who are trying to limit their bandwidth charges!
But whenever I discuss alternative text, stored in a bit of code known as the "alt attribute," someone invariably asks about the different between the alt attribute and the title attribute. In the code for an image, you can put one of each, and often people are left wondering what the difference is and how to use them both effectively.
So let's start from the beginning. Here is some image code with both an alt and a title attribute:
<img src="http://www.lizardkingdom.org/archives/2005/04/bluecarpos.jpg" alt="Movie Poster for Blue Car" title="totally awesome movie, I really enjoyed it" />
The alt= part says what the picture is, the title= part is extra comments.
Repeat after me:
Alt means alternative.
Title is for extra information.
The alt attribute for an image should be whatever is needed to replace the image if it were to disappear. It needs to be fairly short, and the important information needs to be up front so it doesn't hold the reader hostage to a long, drawn-out explanation. If the image is a link, the alt text needs to say so, and where the link goes. Every image that's not a background image should have an alt attribute, either with some text, or blank if the image is purely decorative.
The title attribute is for any additional information, often displayed in a popup box by some browsers when you mouse over the image. You don't want to put any critical information here. It's often not accessible to people who use a keyboard instead of a mouse, it may not be resizable for people who need larger text to see it, and it only stays up for a short time which means it may be difficult for people with any reading difficulties. The number of images that really need title attributes are probably few and far between, and it's okay to leave it off.
So when you're thinking about accessibility, the alt attribute is where you should focus.
What's a bad way to use the alt attribute?
Stuffing it full of keywords hoping to increase your page's search engine rankings.
Seriously, people, I know you love some Google ranking, but when you use the alt attribute on an image to cram keywords at the expense of its actual function, you're essentially telling people who need it that you care more about your page rank than about whether they can even understand what's going on with your blog.
That's bad karma, yes?
Sources and further reading are after the jump, if you're viewing this post on the home page.
Sources and Further Reading
- Top tips for TITLE attributes on the Web Access Centre Blog
- Proper Use of ALT and TITLE Attributes on Fadtastic (though I disagree with parts of it)
- Using the title Attribute by Gez Lemon on Juicy Studio
- The Title Attribute (podcast) at Web Axe.
Not sure I agree with the bit that says
I saw some SEO-ers put title attribute as important as alt attribute. I know title attribute is just an additional information in accessibility. Does title attribute has some SEO effect?
Some of the most abused attributes on the web arguably.
@James, I should clarify, thank you. If the image has meaning in addition to being a link, then yes, the alt should give that meaning. But I'm not sure that the title attribute of the link, for accessibility purposes, does much good. I guess I need to do a little more research about what happens in a screen reader when an image that's also a link is read!