SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    http://nicolasgallagher.com/css-imag...eudo-elements/

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    819
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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....

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Be aware that users with High-Contrast settings on Windows (and maybe other OSes) will not see your background images.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •