Sometimes you need to use an image, with text, for the background of an input button or an image link. This can be the case when you want to have a regular value in a button so that screen readers and people surfing without CSS can still figure out what the input says.

To hide the text with CSS, there are several possibilities :

• set the font-size value to zero : the CSS specification does not indicate how browsers should display text when the font-size is set to a value of zero; many browsers handle it unpredictably
• set the color of the text to transparent : it works in new browsers, including IE 9, but not in older IE versions
• position the text out of the screen with left:-9999px or text-indent:-9999px
• set the text invisible with span {display:none;} or span {visibility:hidden;}

The W3C published a technique using CSS to hide a portion of the link text as part of Techniques and Failures for Web Content Accessibility Guidelines 2.0.