WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Content in background images

for

From: Jimmy Chandler
Date: May 23, 2011 11:48AM

Angela --

The gopenske page is not accessible because not all the content provided to
a sighted person is available to a visually impaired person using a screen
reader or other assistive technology. Seems pretty black and white to me.

And in this case there is no good reason for the method used by the
developer. The text within the images could easily be styled using CSS
instead of using images. Not only would this improve accessibility, it would
decrease download times and bandwidth costs and improve scalability.

I believe the reason you don't see any alt text is because the images have
title attributes instead. This is also a failure, and an easy fix (just
change the title attributes to alt attributes). You can view this using
firebug or by viewing the html source code.

It's another matter to determine how big a problem this is. In this
particular case, assuming the developer changed the title text to alt text,
I would not call this a critical failure because the content that is missing
is not vital to understand the purpose of the link. If a screen reader user
hears "Penske Truck Rental" as the link text instead of "Truck Rental.
Business need or personal move. We have the right truck for you," I'm not
sure how much important information is missing. But that may say more about
the quality of the copywriting than its accessibility.

To summarize my recommendations:

- Don't use images (background or using the <img> element) to display text
when you can accomplish the same visuals using HTML and CSS
- Do use the alt attribute instead of the title attribute to describe the
content of all <img> elements

Jimmy Chandler
@uxprinciples
"Accessibility is Not a Checklist" video: http://vimeo.com/21502987|
transcript:
http://uxprinciples.com/?page_id=108

On Mon, May 23, 2011 at 12:53 PM, Angela Colter < <EMAIL REMOVED> > wrote:

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