WebAIM - Web Accessibility In Mind

E-mail List Archives

Content in background images

for

From: Angela Colter
Date: May 23, 2011 11:03AM

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