Foreground sprites and the alt tag

Question

I would like to reduce the number of HTTP requests in this website I'm building, and sprites would be a simple way to do that; however, for semantic reasons some of the imagery should remain in the foreground. Assume for the sake of this question that I have a perfectly functional way to sprite a foreground image.

So what should my alt tags look like? Here's one thought I had:

<img src="mysprite.png" alt="Product photographs of all the frobnobs we offer, organized by gauge">

…but does that really provide accessibility to the visually impaired, given that the image would only be showing one "frobnob" at a time?

Answer 1

That would not be accessible, and would actually be kind of useless. Your alt text(there's no such thing as alt tags) should describe what that particular image tag is actually presenting.

Let's say your sprite has a bunch of animal icons in it.
When you use it to show the sprite chunk with a cat in it, your image tag should be:

<img src="animals.png" alt="Cat icon" />

And when you use it to show the dog it should be:

<img src="animals.png" alt="Dog icon" />

The alt text is intended to be a replacement for the visual content if it doesn't load, or isn't visible to the user. Sprites are a bit of an oddity(read: cheat), so it might help to think of it as needing to replace the current use of the image tag. In contrast, what you're doing in your question is describing the image file, even though you're not always showing the entire thing. Sprites are a collection of images, and when you use them, the alt should match the bit you're actually using.

Answer 2

I completely agree with Su' about tags and properties purposes for accessibility and correct application of sprite techniques.

However, if having foreground images loaded through sprite technique is completely vital for you, you can associate it as follows:

in HTML code keep as suggested by Su', for example:

<img src="animals.png" alt="Cat icon" />

<img src="animals.png" alt="Dog icon" />

Then, use the alt attribute on CSS for positioning:

img[alt="Cat icon"] {top: -10px; left: 0px;}
img[alt="Dog icon"] {top: -20px; left: 0px;}

Hope this helps. Many people often forget about CSS attributes selectors.