1

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.

closed as off-topic by Mike M, dennislees, Ken Mohnkern, jazZRo, Shreyas Tripathy Nov 19 '18 at 5:14

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Mike M, dennislees, Ken Mohnkern, jazZRo, Shreyas Tripathy
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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 Nov 16 '18 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 Nov 16 '18 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 Nov 16 '18 at 14:43
3

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.