WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Content in background images

for

From: Dean Hamack
Date: May 23, 2011 4:42PM

The fix for this is easy. You simply wrap the link text in spans and hide it
off screen using the skip link method, like so:

<a class="home go_nav_rental" title="Penske Truck Rental"
href="http://www.pensketruckrental.com/"><span>Penske Truck
Rental</span></a>

#home .go_nav_rental {
background-image: url("../img/hm_nav_truck_rental.gif");
}

#home .go_nav_rental span
{position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

There's no need to hardcode the images in the html, and I can give you
several reasons why you wouldn't want to. The primary one being that it's
much more difficult to tailor the site for mobile devices when you do so.