Hide text with CSS

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.