Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

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.

share|improve this answer
    
I got bogged down in the metasemantics and forgot what alt really does. Thanks for snapping me out of it! –  kojiro Sep 20 '11 at 15:51
add comment

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.

share|improve this answer
    
The only issue with this is supporting older versions of IE –  John Conde Sep 19 '11 at 23:44
    
Matching CSS selectors based on a "free text" field like alt is incredibly unstable. –  DisgruntledGoat Sep 22 '11 at 11:01
    
Yeap, I know it may (will!) present issues. Specially with older/maveric browsers and implementations. However, all major browsers in their lastest version adheres to this standard. If you follow google tendencies to cut off support for older IE version, this can be a solution. Other than IE browser users, in their vast majority, keep browser updated, so... –  Dave Sep 26 '11 at 21:45
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.