The errors say that the link is empty because it contains no text.

Well, it's empty because it contains nothing, whether text or image. Sprites don't count as images; they're background.

A title isn't sufficient, because that only shows up in response to a targeted action on the user's part. They probably want an alt--which is a bit tricky since there's nothing to attach the alt to.

It's better to approach the issue from the other side. How would your visually impaired users find, let alone interact with, the link? No use putting in invisible text, since screen readers very properly ignore "display: none". I don't know if text with color set to "transparent" would work. Another option worth trying is an image consisting purely of a single-pixel transparent gif, inside the span (which I assume has a size, defined elsewhere). It won't look any different to sighted viewers, but it gives you something to attach an alt to.

It's been awhile since I messed with this, but I THINK that what I did was insert a "loading" image. It cached after the first time so it showed up on every load, then was overwritten by the background sprite.

Something like:

<span class="spriteexample-32">
 <img src="loading.gif">
</span>

My apologies if I got that backwards, it's been awhile since I did it.

I tried this for each sprite:

<a href="https://example" title="Example"><span class="spriteblogger-32"><img alt="Blogger" src="../javascripts/images/catalog/grey-sprite.png"></span>

grey-sprite.png is a 1px x 1px transparent png that overlays the sprite background images.

It looks/works fine when previewed in a local host but when published I see the first three letters of the alt text (in this case “Blo”) and and a picture of a page on each sprite.

Sorry for the delay, I haven’t been able to get back to this. Thanks for your help!

Is the image path the same on your local views as it is on your domain? Is the path shown the actual path?

Yes.

Maybe placing a copy of "grey-sprite.png" in root to use a local image to simplify the path and then change to

<img alt="Blogger" src="/grey-sprite.png">

for a test? Seeing the "alt" text indicates that the actual image is not where it is being called for - or at least it is not loading for some reason. Making it local eliminates one possible cause for that.

Fixed! Your response reminded me that I forgot to publish my images folder. The page now receives 0 errors when tested in Wave. Thanks again!

Whee! I LOVE happy endings! :)