What are the best practices for using sprites in accesibility? There isn't much information about it. This particular one has a series of action buttons (toggles, search and cart icons, among others) and brand images.

I don't have any question about implementation, I just want to know if this practice is alright for screen readers and related accesibility tools.

  • Hi Mar, this question will probably get closed for being off topic, because it's more about implementation. For what its worth, when you have a CSS question, the site css-tricks.com is usually a good place. Googling 'csstricks sprites' gets you a handful of good articles on the topic. Notably, many of the highest ranked articles one finds when googling in this area are coming up on ten years old.
    – dennislees
    Commented Nov 16, 2018 at 14:29
  • 1
    My understanding is that a some of the main reasons that sprites were created are no longer such a big problem. Ten years ago internet speeds weren't generally as high as they are these days (so downloading a dozen tiny images files isn't a big deal), these days CSS can be used to carry out many of the graphical functions (e.g. color gradients, corner radii) sprites were used for, and modern designers tend to use optimized and cloud-based icon solutions (e.g. font awesome or glyphicon) instead of uploading lots of individual image files (either as a a sprite or individual image files)
    – dennislees
    Commented Nov 16, 2018 at 14:35
  • for icons you can be better using a font. It can download quicker and other sites use them so could be cached already so takes no time at all if you use the CDN. Something like fontawsome is pretty common. - fontawesome.com - good place to start
    – Andrew
    Commented Nov 16, 2018 at 14:43

1 Answer 1


There is a valid question in there at the end that is not off topic,

[does] using just one image for several logos and icons...impact the accesibility of the website

Whether you have individual images and multiple HTTP requests or just one sprite image has zero affect on accessibility.

How you use the image (whether one or multiple) is what affects accessiblity.

Images that are used in the background (CSS background:url(foo.jpg) with offsets) are invisible to screen readers, which is a good thing if the image is decorative.

If a background image is informative and has meaning, then that meaning will need to be conveyed to all users. That's normally done with the alt attribute on the <img> tag but if the image is in the background, then the image's information would have to be on the containing html element (or one of its ancestors).

But this is starting to get into implementation and would need to be addressed on stackoverflow.com. You can post there and use the accessibility tag like you did on this question.

The simple answer to the gleaned question is 'no'.

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