Posted By

justinseiter on 04/26/09


Tagged

css image accessibility


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

cschlens
dmatranga
keith
smitchio
spazione


Accessible Image Replacement - Gilder/Levin Method


 / Published in: CSS
 

URL: http://csswizardry.com/web-design+/

This method maintains its integrity with all combinations of images on/off and CSS on/off.

This method works by laying an empty span over the top of the parent element with the required image applied as a background to that span.

There is however a drawback to this method; the empty span. This is bearable though as the span will have no impact on the usability/accessibility on the page, and will only impact ever so slightly on semantics. Now users can always see an image or text regardless of whether they have CSS and/or images disabled.

  1. #header h1 a{
  2. display:block; /* Required */
  3. width:250px; /* Width of image in question */
  4. height:70px; /* Height of image in question */
  5. position:relative; /* Required */
  6. }
  7. #header h1 a span{
  8. position:absolute; /* Required */
  9. width:100%; /* Stretch full width of parent */
  10. height:100%; /* Stretch full height of parent */
  11. background:url(images/logo.gif) top left no-repeat; /* Image */
  12. cursor:pointer; /* Required for links to appear like links in IE */
  13. }
  14.  
  15. <!-- THE HTML -->
  16. <h1><a href="./" title="Return Home"><span></span>Home</a></h1>

Report this snippet  

You need to login to post a comment.