How to Make a CSS Image Sprite Accessible

Solution: Use transparent text to provide a screen-readable description of your image.

Here’s a problem we came across on a client’s site recently: a previous developer had created a CSS sprite to display a series of logo images on the home page and when we checked the accessibility, we noticed that this was causing an issue for screen readers. There are many good free tools out there, but in this scenario, we were using WAVE. If we were using <img> elements (with html or image blocks in a pagebuilder) to display each logo, we would be able to set the alt text of the image, but we aren’t able to do that with a sprite because we’re combining multiple images into one. This is not a problem if the images are decorative or if they are accompanied by text, but that wasn’t the case. To solve this, we just added some text to each link and made the text transparent so that it was readable for a screen reader but not redundant visually. I created a similar sprite below to demonstrate how it’s done.

What is a CSS Sprite?

A sprite is a collection of images combined into one file and then displayed in parts to improve performance. Rather than loading each image individually, the browser only has to load one larger image and then show different portions of the image to create the same effect as multiple images. Even though large images take longer to load than small ones, this approach limits the number of http requests that the browser has to do. Sprites have long been used in video game development and started to become more popular on websites in the early 2000s.

CSS Image Sprites vs. Lazy Loading: Which is better?

CSS image sprites are not a one-size-fits-all solution to your image performance problems. There are many other optimizations you should consider, including compression, file type, removing excessive images, etc. In some cases, you’ll also be implementing lazy loading so that below-the-fold images are not loaded until the user scrolls. If you put all of your images in one big sprite, you will not be able to defer the loading of those images and that could end up being less effective. You’ll need to consider the layout of your page. Personally, I think it makes the most sense to use a sprite when you have numerous small images grouped together like in the example below, and then lazy loading can be enabled as well if it makes sense for the page in question.

Case Study

I’ve created a similar scenario here to demonstrate how it works. This is a section that shows the organizations we are a part of by using a sprite to display a list of logos.

Result

HTML

<div class="ww-memberships">
<p>Word &amp; Web is a proud member of...</p>
<ul id="ww-membership-list">
<li class="cvedc"><a href="https://www.cvedc.org/member-directory" target="_blank" rel="noopener">CVEDC</a></li>
<li class="montp-alive"><a href="https://www.montpelieralive.com/directory" target="_blank" rel="noopener">Montpelier Alive</a></li>
<li class="bni"><a href="https://bnivermont.com/heartofvermontbni/en-US/index" target="_blank" rel="noopener">BNI</a></li>
</ul>
</div>

CSS

.ww-memberships {
width: 60%;
margin: 25px auto auto auto;
min-width: 500px;
clear: both;
padding-bottom: 50px;
text-align: center;
}

ul#ww-membership-list {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 60px;
padding: 0px;
margin-top: 15px;}

.ww-memberships li {
height: 100%;
}

.ww-memberships li a {
background: url(/wp-content/uploads/2022/11/Memberships-ww.jpg) no-repeat;
display: block;
height: 100%;
color: rgba(0,0,0,0) !important;
overflow: hidden;
}

.ww-memberships li.cvedc a, .ww-memberships li.cvedc {
   background-position-x: -15px;
    width: 200px;
}

.ww-memberships li.montp-alive a, .ww-memberships li.montp-alive {
   background-position-x: -280px;
   width: 150px;
}

.ww-memberships li.bni a, .ww-memberships li.bni {
   background-position-x: -555px;
width: 150px;
}

Thanks for reading! Still need help? Don’t hesitate to reach out to us for ad hoc tech support or web development.

Sources

Great info about CSS sprites can be found at CSS-Tricks.
Insights into the history of sprites.