having worked at various places in the last few years I have realized there is a debate over this…
are image-links more accessible if you use background-images for the links or image tags in the markup?
(if you use background-images you can do the hover with CSS; if you use img-tags you have to do the hover with JavaScript, another consideration…)
am doing a mock website as a test for a possible job, just want to know what is best way here; technically doesn’t matter to me, I know how to do this equally well both ways… just want to know what is considered best practice… (I was thinking of doing it both ways, two versions, but that’s a bit of overkill; just want to do what is considered best practice…)
If you are doing a hover effect, I’d suggest a background image. From an access point of view, the important thing is the link, rather than the image. I would recommend an image replacement technique, such as this one (if you image is not transparent):
For best accessibility, it’s better to insert the actual text (for when images are off) and then insert an empty span (or other element like a <b>) and absolutely place that element over the top of the text and put the background image/sprite on the span. That’s what’s done in the first link above. It’s the most accessible “image replacement” technique.