HTML & CSS
I was wondering what is the best way to implement the title and alt on a linking image.
An img-tag can have both the title and alt attributes, an a-tag can only have the title attribute.
When linking an image what is the best way to implement the title-attribute?
Should I put it on both the img and a-tag or just one of the two?
Before you go ahead and put the title on anywhere, have a read of David Bell's article on screen readers (thanks to @Stomme_poes for bringing it to our attention), where he describes why the
title attribute does absolutely nothing for people using access technology. And in many cases it does nothing for people using a traditional desktop computer with no impairments either, because they simply won't hover the cursor round looking for tooltips. If the information
title is both useful (ie, doesn't simply replicate what you've already got on the page) and non-essential (ie, it doesn't matter if half the people don't see it) then go with it, but if it fails either of those tests then you're better off not using it.
Whether you put the
title on the
<a...> or the
<img...> depends on what the purpose of it is. If it's describing the picture then it belongs in the
<img...>, but if it's describing the link destination then it belongs on the
Steve Faulkner gives a good overview of when to use it: http://www.paciellogroup.com/blog/2010/11/using-the-html-title-attribute/
It's best to have good link text within your anchors, and good alt text within your images. If an image is inside an anchor, the alt text often should be as good as what your link text would be, assuming alt text is taking its place.
Images who are purely decorative, such as bullet icons, should be alt="", since otherwise many readers will read out the whole image URL which sucks and usually is useless to everyone.
Thanks for advices
This topic is now closed. New replies are no longer allowed.