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=”http://www.downwithwallpaper.com/tips.html” title=”DownWithWallpaper.com | 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=”http://navigatorsystems.com” title=”NavigatorSystems.com | 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.