WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Content in background images

for

From: Angela Colter
Date: May 24, 2011 11:21AM

Hi Dean,

Indeed, the CSS for the link I mentioned specifies both text-indent:
-10000px and overflow: hidden

And that's the reason for my question.

One of the things that accessibility review checklists always tell you to do
is turn off images to see if the same information is conveyed. (See
http://www.w3.org/WAI/eval/preliminary.html and
http://webaim.org/resources/opera/#images ) In this case, the page is marked
up so that screenreader users have access to the link text, but people who
merely turn off images in a GUI browser will not.

It makes sense that marking up the page this way is useful for allowing
flexibility in how the page is presented in a variety of devices, but is
that happening at the cost of users who are simply turning images off?

And is the poor experience of these users--and I'll grant you that I have no
idea if such users even exist--a valid argument against using this
content-in-background-images method?

Angela

On Mon, May 23, 2011 at 6:37 PM, Dean Hamack < <EMAIL REMOVED> >wrote:

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