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?

  • When using sprites like that please remember to test what happens when 1) CSS ON / IMG OFF 2) CSS OFF / IMG ON 3) CSS OFF / IMG OFF 4) IE high-contrast mode. I can already say that ALT text won't be displayed when your image is position:absolute and cropped (either overflow:hidden or clip). I've managed to fulfill all the four points only if two same images are used next to each other - one for display, one for ALT text. It works but both the HTML and CSS look quite nasty though.
    – tomasz86
    Commented May 10, 2016 at 8:26
  • Another method is to use one image only for ALT text and display the proper one with CSS content property in a pseudo-element (:before or :after) but it is much worse in terms of performance when used on many elements on a large site.
    – tomasz86
    Commented May 10, 2016 at 8:35

2 Answers 2


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.

  • I got bogged down in the metasemantics and forgot what alt really does. Thanks for snapping me out of it!
    – kojiro
    Commented Sep 20, 2011 at 15:51

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.

  • The only issue with this is supporting older versions of IE
    – John Conde
    Commented Sep 19, 2011 at 23:44
  • Matching CSS selectors based on a "free text" field like alt is incredibly unstable. Commented Sep 22, 2011 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... Commented Sep 26, 2011 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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