: Foreground sprites and the alt tag 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

@Karen161

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.

Vote Up Vote Down

@Kristi941

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.

Vote Up Vote Down