Image links: what is more accessible?

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…)

thank you…

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):

http://www.pmob.co.uk/temp/headerreplacement3.htm

or perhaps this one if the image needs transparency:

thank you for your response…

well, if I do background-image I can just do the hover effect with CSS, right? (using a:hover… yes?)

thank you…

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.

Be aware that users with High-Contrast settings on Windows (and maybe other OSes) will not see your background images.