What are the alternatives? Using background-images with off-screen text? Bad code:

1. <a href="foo" class="button">
2. <span>Alternative Text</span>
3. </a>

1. a.button, button {
2. background: url(foo.gif) 0 −26px no-repeat;
3. display: block;
4. height: 52px;
5. overflow: hidden;
6. position: relative;
7. width: 150px;
8. }
9. span {
10. left: −9999px;
11. position: absolute;
12. top: auto;
13. }

That’s a bad idea with accessibility issues. Screen readers will be able to read the text, but if somebody with low vision has high-contrast custom stylesheets, it is likely that the background-image won’t be displayed. Still the alternative text will be invisible off-screen, so the link or button becomes unusable.

A better solution

Now Google’s accessibility specialist T.V. Raman explained their idea for replacing images with sprites. Here are screenshots of Google search results with images, and with background images disabled:

Google puts the alternative text behind the background image simply by attaching it on the span element, not the anchor. So when CSS or background images are turned off, the text just reappears.

1. <a id="logo" title="Go to Google Home" href="http://www.google.com/">
2. Google
3. <span></span>
4. </a>

1. #logo {
2. display: block;
3. height: 52px;
4. overflow: hidden;
5. position: relative;
6. width: 150px;
7. }
8. #logo span {
9. background: url(foo.gif) 0 −26px no-repeat;
10. height: 100%;
11. left: 0;
12. position: absolute;
13. top: 0;
14. width: 100%;
15. }

There’s only an issue if you have a lot of alternative text, perhaps combined with text zoom, so that it doesn’t fit in the reserved space. But I can live with that.

Congratulations to Google for this ellegant solution, and it’s so simple! Why didn’t I think of it?