I'm curious if there is any good solution to use sprite sheets with background-image, possibly with a hover effect, and still get the accessibility benefits of alt tags? For instance:

    <a class="fb sprite" href="..."> </a>

    .sprite {
      background-image: url("/sprites.png");
      background-repeat: no-repeat;
    }
    .sprite.fb {
      background-position: -4px, -4px;
      width: 42px;
      height: 42px;
    }
    .sprite.fb:hover {
      background-position: -4px, -54px;
    }

What would you do to make that accessible? I did some Googling about this a few weeks ago, and it seemed to be a topic of "ongoing research." None of the solutions I could find were very appealing. So, any suggestions?