E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 15 (In chronological order)

From: Angela Colter
Date: Mon, May 23 2011 11:03AM
Subject: Content in background images
No previous message | Next message →

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

From: Jimmy Chandler
Date: Mon, May 23 2011 11:48AM
Subject: Re: Content in background images
← Previous message | Next message →

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

From: Angela Colter
Date: Mon, May 23 2011 4:12PM
Subject: Re: Content in background images
← Previous message | Next message →

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

From: Dean Hamack
Date: Mon, May 23 2011 4:42PM
Subject: Re: Content in background images
← Previous message | Next message →

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.

From: Andrews, David B B (DEED)
Date: Tue, May 24 2011 8:30AM
Subject: Re: Content in background images
← Previous message | Next message →

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

Dave

From: Keith (mteye)
Date: Tue, May 24 2011 9:12AM
Subject: Re: Content in background images
← Previous message | Next message →

... My question for you all: how big of a problem is this? I think it's
likely...

No problem for me, I'll shop somewhere else for a moving van.

There are images that ought to appear in the background, if they simply
provide a consitent theme from page to page. Sales or marketing copy would
seem to be pretty important if the company hopes to get their point across.
Though a picture may be worth a thousand words, it can be helpful for the
company to ensure the user actually understands the message. Using words is
the way to go. If the words are in the image, then taking time to ensure
those words are understood in simple formats, even at the risk of being
redundant, is the way to go. Saying it once, in one form, and hoping that
everybody interprets the message in the visual impact the same way is risky.


Just some observations.

from
Keith H

From: Jimmy Chandler
Date: Tue, May 24 2011 10:36AM
Subject: Re: Content in background images
← Previous message | Next message →

Angela --

Sorry about my mistake about <a> vs. <img>. That is the danger of answering
questions on discussion lists during the workday, not taking enough time to
investigate it carefully.

That said, I believe you should recommend that they change this site-wide.
The current method does create a barrier to accessibility and is easily
fixed; the amount of labor involved is not high per image, but it could be a
lot of work if there are a lot f instances to fix. Depending on how often
they make site updates, these repairs could be done gradually as part of
regular site maintenance and updates.

Jimmy Chandler
@uxprinciples

From: Dean Hamack
Date: Tue, May 24 2011 11:15AM
Subject: Re: Content in background images
← Previous message | Next message →

I can only see one reason why users would disable images, and that's if they
are on a mobile device with a slow connection. And I think that's a really
rare edge case. As long as the link contains all of the text that's in the
images so that screenreader users can get the same information, I think it
is perfectly fine.


On 5/24/11 10:06 AM, "Angela Colter" < = EMAIL ADDRESS REMOVED = > wrote:

> 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

From: Angela Colter
Date: Tue, May 24 2011 11:21AM
Subject: Re: Content in background images
← Previous message | Next message →

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

From: deborah.kaplan
Date: Tue, May 24 2011 11:27AM
Subject: Re: Content in background images
← Previous message | Next message →

On Tue, 24 May 2011, Dean Hamack wrote:

> I can only see one reason why users would disable images, and that's if they
> are on a mobile device with a slow connection. And I think that's a really
> rare edge case.

I know multiple users who disable images. Sometimes it's a
disability reason -- visual processing disorders,
non-neurotypicality, or seizure disorders which make the images
a distraction or a trigger. Sometimes it's a slow connection, as
you say. Sometimes it's because they're browsing in a public
place and are worried about what the images will show.

In my experience, it's rare, but not so rare as to not be worth
considering. And like I said, several of those users are
specifically doing it for accessibility purposes.

-Deborah

From: Dean Hamack
Date: Tue, May 24 2011 12:39PM
Subject: Re: Content in background images
← Previous message | Next message →

If you want to cover all your accessibility bases AND have the flexibility
to optimize for mobile/change styles quickly, you can add a small
transparent image with your alt text like so:

http://bushidodesigns.net/images.htm


On 5/24/11 10:18 AM, " = EMAIL ADDRESS REMOVED = "
< = EMAIL ADDRESS REMOVED = > wrote:

> I know multiple users who disable images. Sometimes it's a
> disability reason -- visual processing disorders,
> non-neurotypicality, or seizure disorders which make the images
> a distraction or a trigger. Sometimes it's a slow connection, as
> you say. Sometimes it's because they're browsing in a public
> place and are worried about what the images will show.
>
> In my experience, it's rare, but not so rare as to not be worth
> considering. And like I said, several of those users are
> specifically doing it for accessibility purposes.
>
> -Deborah
>

From: Tim Harshbarger
Date: Tue, May 24 2011 1:09PM
Subject: Re: Content in background images
← Previous message | Next message →

It's my understanding and my past experience that if you use high contrast mode on Windows, background images will be disabled in some of the browsers. In fact, I spent a whole weekend once trying to figure out how in the world sighted people knew a table was sortable before realizing that the visual indicators were CCSS background images. Until then, i was starting to think all the sighted folk had some sort of user interface mental telepathy--or just went around clicking on things to see what happens.

From: Nancy Johnson
Date: Tue, May 24 2011 1:51PM
Subject: Re: Content in background images
← Previous message | Next message →

Getting back to the background images with text..... It's much faster
for the developer if the design and complicated... not an excuse but
I've seen this first hand....

I received some basic htmls for a government site recently First the
design was far to complicated for any website

There was a heading area where there was a set of 5 rules spanning
out from either side of the text and a complicated background behind
the rules.

When I called her on it, she simply broke the image in half and
brought the section with the text to an inline image and use alt.

I did redo the entire section... and made it work so the headings were
actually text...there were no links..yet it was heading text.

My point is that some developers see this as speed, don't understand
the implications..

Nancy

On Tue, May 24, 2011 at 3:09 PM, Tim Harshbarger
< = EMAIL ADDRESS REMOVED = > wrote:
> It's my understanding and my past experience that if you use high contrast mode on Windows, background images will be disabled in some of the browsers.  In fact, I spent a whole weekend once trying to figure out how in the world sighted people knew a table was sortable before realizing that the visual indicators were CCSS background images.  Until then, i was starting to think all the sighted folk had some sort of user interface mental telepathy--or just went around clicking on things to see what happens.
>
>

From: Bevi Chagnon | PubCom
Date: Tue, May 24 2011 1:57PM
Subject: Re: Content in background images
← Previous message | Next message →

Tim H. wrote " Until then, i was starting to think all the sighted folk ...
just went around clicking on things to see what happens."

Oh, but we do, Tim!
In a really poorly designed website, we might not know what's clickable nor
have any clue where it will take us.
We feel your pain. <grin>

- Bevi

From: Keith Parks
Date: Tue, Jun 07 2011 5:36PM
Subject: Re: Content in background images
← Previous message | No next message

Coming late to this thread, but no one seemed to mention this...

On May 23, 2011, at 9:53 AM, Angela Colter wrote:

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


Another problem with text-as-image is that the text cannot be scaled.

Someone with low vision (and I'm fast approaching that) should be able to scale up the font size via the browser controls. I do this on many sites with small type, and in fact the sub-text under the "Truck Rental" and other heads is quite small. I don't want to do a screen-zoom, or use screen magnifying software, I just want to bump the font size up a bit.

Can't be done with the text as background image.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

America - now "All You Can Eat" on Mondays and Thursdays!