WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Image sprites and Accessibility checking

for

From: Benjamin Hawkes-Lewis
Date: Feb 28, 2009 1:55PM

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