maya90 — 2012-09-02T10:07:00-04:00 — #1
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?
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...)
ralphm — 2012-09-02T19:22:41-04:00 — #2
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):
or perhaps this one if the image needs transparency:
maya90 — 2012-09-02T19:47:24-04:00 — #3
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?)
ralphm — 2012-09-02T20:47:16-04:00 — #4
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.
stomme_poes — 2012-09-05T16:02:32-04:00 — #5
Be aware that users with High-Contrast settings on Windows (and maybe other OSes) will not see your background images.
mittineague — 2014-09-25T01:50:40-04:00 — #6
This topic is now archived. It is frozen and cannot be changed in any way.