WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Content in background images

for

From: Angela Colter
Date: May 23, 2011 4:12PM

Hi Jimmy,

Thanks for your response.

This is not a simple matter of the images having title attributes instead of
alt attributes. There is no <img> tag on which to append an alt attribute.
The title attribute is on the <a> tag, not an <img> tag. The images in
question--and there are a lot of them on this page--are all in the CSS file.
And you can't place an alt attribute on a background image.

You're right, there is no good reason for a developer to use this background
image method.

My question is, now that the damage has been done, does it make sense to
recommend that the change to this method be implemented site wide? That
someone puts in the hours to move the content images out of the CSS and into
the HTML. Or is this, relatively speaking, a minor issue?

Hope this clarifies things,

Angela

On Mon, May 23, 2011 at 1:37 PM, Jimmy Chandler < <EMAIL REMOVED> >wrote:

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