WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Content in background images


From: Andrews, David B B (DEED)
Date: May 24, 2011 8:30AM

Also, using JAWS 12, I could not get a quote to rent a truck, as the date selector didn't seem to be accessible.


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Angela Colter
Sent: Monday, May 23, 2011 11:53 AM
To: WebAIM Discussion List
Subject: [WebAIM] Content in background images

I've recently come across an interesting accessibility issue that I'm hoping you'll weigh in on: content that appears in a background image.

For example, see http://www.gopenske.com/

Much of the text on that page is in images. For example, the linked image that says "Truck Rental. Business need or personal move. We have the right truck for you" Is actually a background image. The markup looks something like this:

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

While the CSS has this:
#home .go_nav_rental {
background-image: url("../img/hm_nav_truck_rental.gif");

Here's where it gets interesting. If I view a text-only version of the page, or check it out in a screenreader, the "Penske Truck Rental" link text that the background-image wraps around is revealed. It's not the verbatim text that appears in the image, but it does give you some sense of what you'll get when you click on the link.

However, if I view the page with images turned off, I get nothing. The image AND the link text just disappears. If I happen to mouse over where the image was, the title attribute for the <a> gives me a clue about where I'm going, but that is, I would think, a very big "if."

My question for you all: how big of a problem is this? I think it's likely to be a problem, but developers that I talk to seem to think that if the link text is there, that putting the content in a background-image is an acceptable method, no big deal.

What do you think? If you were working on a site like this, would you recommend moving the background-image from the CSS to an <img> in the page's HTML? Is this no big deal and it would be better to deal with bigger, more important accessibility issues?

I look forward to your feedback,

Angela Colter

Web: http://www.angelacolter.com
Twitter: @angelacolter