Anchors and Images, titles and alts

26 Apr

The question arose at the office last week, “is there a best practice on using the title attribute on the <a> vs. <img> tags when the link wraps the image?â€? With so many attributes available it can be confusing to know which ones to use when.

The title attribute tells you where a link is going. They will appear as a tool-tip when moused over (in modern browsers) and they can be read aloud by screen readers. They aid the user in letting them know where a link will take them. Anchors (a) should have title attributes as a matter of manners. As an example:

I just read <a href=”” title=” | How to take down wallpaper” />a great article</a> that gave me some home improvement tips.

The alt attribute tells you what you’re looking at. Screen readers use this as the verbal description for the image.

So, the best practice for links around images would be:

<a href=”” title=” | Home” ><img src=”logo.gif” alt=”Navigator Systems logo” /></a>

Make sense? Now I have to go clean up all my code to make sure I am using them correctly.

The first code example here was stolen from Dan Cederholm’s Web Standards Solutions: The Markup and Style Handbook. It’s an excellent reference for such questions.

Leave a comment

Posted by on April 26, 2005 in code


Leave a Reply

Your email address will not be published. Required fields are marked *