E-mail List Archives

Search E-mail List Archives for

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

From: Cullom, Adria Ellen
Date: Wed, Feb 25 2009 3:15PM
Subject: Image sprites and Accessibility checking
No previous message | Next message →

Hi,

I'm wondering if you guys at WebAIM or anyone on the list has had experience with image sprites and accessibility testing. In particular, since image sprites eliminate the use of the <IMG> tag, how do you check for missing alt text? Any insight would be appreciated.

Thanks!

-- Adria Ellen Cullom

From: Christian Heilmann
Date: Wed, Feb 25 2009 3:30PM
Subject: Re: Image sprites and Accessibility checking
← Previous message | Next message →

Cullom, Adria Ellen wrote:
> Hi,
>
> I'm wondering if you guys at WebAIM or anyone on the list has had experience with image sprites and accessibility testing. In particular, since image sprites eliminate the use of the <IMG> tag, how do you check for missing alt text? Any insight would be appreciated.
>
>
I really do not understand how this question still survives. CSS sprites
are for CSS *background images* which are by definition only of
*aesthetic* value - not visual content of the document itself. If you
put an image in the page that has *meaning* then use an IMG element and
give it an alternative text in the *alt* attribute. You can also add a
title attribute to add extra information that will be displayed to every
user as a tooltip. If your image has *a lot of content* for example a
graph then consider using the *longdesc* attribute to link to a textual
representation of the same data.

That is it - images in CSS are only visual extras, not page content,
hence they *never* need alternative text. "Rounded corner" or
"blue-yellow gradient" does not help anybody as alternative text - on
the contrary, it annoys!

regards
Chris

From: Seth Kane
Date: Wed, Feb 25 2009 3:35PM
Subject: Re: Image sprites and Accessibility checking
← Previous message | Next message →

If you are using the FIR Technique (ie. Image Sprites) you just want to
represent the context/content of what the image is in the DIV, A, Etc...
of what you are using as the sprite. No more Alt Tags.

Old way.... <a href="#"><img src="something.jpg" alt="Click this button
to a new page"></a>


New Way...

<a href="#" id="button">Click this button to a new page</a>
<style>
#button {
Background: url(something.jpg) no-repeat;
}
#button:hover{
Background-position: -50px 0px;
}
</style>

Seth Kane Sr. Presentation Layer Developer

From: ben morrison
Date: Thu, Feb 26 2009 3:25AM
Subject: Re: Image sprites and Accessibility checking
← Previous message | Next message →

On Wed, Feb 25, 2009 at 10:29 PM, Christian Heilmann < = EMAIL ADDRESS REMOVED = >wrote:

> Cullom, Adria Ellen wrote:
> > Hi,
> >
> > I'm wondering if you guys at WebAIM or anyone on the list has had
> experience with image sprites and accessibility testing. In particular,
> since image sprites eliminate the use of the <IMG> tag, how do you check for
> missing alt text? Any insight would be appreciated.
> >
> >
> I really do not understand how this question still survives. CSS sprites
> are for CSS *background images* which are by definition only of
> *aesthetic* value - not visual content of the document itself. If you
> put an image in the page that has *meaning* then use an IMG element and
> give it an alternative text in the *alt* attribute. You can also add a
> title attribute to add extra information that will be displayed to every
> user as a tooltip. If your image has *a lot of content* for example a
> graph then consider using the *longdesc* attribute to link to a textual
> representation of the same data.
>
> That is it - images in CSS are only visual extras, not page content,
> hence they *never* need alternative text. "Rounded corner" or
> "blue-yellow gradient" does not help anybody as alternative text - on
> the contrary, it annoys!


I do concur, however at, work we do actually use sprites for performance
reasons, so it is a valid question.

ben
--
Ben Morrison

From: Gunlaug Sørtun
Date: Thu, Feb 26 2009 5:10AM
Subject: Re: Image sprites and Accessibility checking
← Previous message | Next message →

ben morrison wrote:

> I do concur, however at, work we do actually use sprites for
> performance reasons, so it is a valid question.

I can only see 3 uses of sprites as actual content.

1: Sprite methods can be applied to foreground images with good results
in rare cases - inside size-controlled links etc., and then the
alt-attribute can be used on the img element.

2: Then we have the use of sprite-background on transparent images, in
which case the img element has an alt-attribute.

3: In most cases some form of image replacement method is used with
sprite-maneuvering in the background, and then the replaced text is
supposed to serve as "alternative" to the sprite that's replacing it.


These methods can of course be combined to create all kinds of strange
pictures that changes depending on user-action, but there's either an
available alt-attribute or a replaced text in there somewhere. If not,
then the whole construction is decorative and (should be) inaccessible.

regards
Georg
--
http://www.gunlaug.no

From: Benjamin Hawkes-Lewis
Date: Sat, Feb 28 2009 1:55PM
Subject: Re: Image sprites and Accessibility checking
← Previous message | No next message

On 25/2/09 22:13, Cullom, Adria Ellen wrote:
> I'm wondering if you guys at WebAIM or anyone on the list has had
> experience with image sprites and accessibility testing. In
> particular, since image sprites eliminate the use of the <IMG> tag,
> how do you check for missing alt text?

CSS "background-image" used for content creates immediate accessibility
problems, but nevertheless (as Ben notes) developers sometimes still use
it for performance reasons.

The reliable way to test for missing text equivalents for such images
(and, equally importantly, to test for incorrect text equivalents) is
for human beings to compare the page with and without CSS.

Beyond this, you can perform a limited degree of automated testing by
verifying things like this:

1. Elements that should always contain text ("h1", "h2", "h3", "h4",
"h5", "p", "li", "dd", "dt", "blockquote", "caption", "th", "label",
"legend", "button", "a href", "q", "em", "strong", "b", "i", "abbr",
"acronym", "address", "cite", "code", "dfn", "kbd", "pre", "samp",
"sub", "sup", "tt", and "var" from HTML 4.01 Strict) do in fact have
alphanumeric text content (whether in the form of element content, "alt"
attributes, or both).

2. Documents have at least an "h1".

3. All fields have associated label elements.

This would catch problems like:

<h1></h1>

h1 {
background: transparent url(sprite.png) no-repeat 500px 100px;
}

--
Benjamin Hawkes-Lewis