Image Replacement | CSS: Presentation Layer

Standards Based Development

Using text-indent is one approach to hiding content and can be established two ways, each with different outcomes.

text-indent used in conjunction with position:relative:

.menubutton{ 
  position: relative; 	
  text-indent: -9999px; 	
}

The second method is using text-indent with position:absolute; this relies on setting text-content in a sub-element, moving the entire element offset. This is the recommended approach when using img / instead of background-image for the image asset. The most common example is for logotypes:

.logotype .alt-logo{ 
  position: absolute; 
  left: -9999px; 
}

Note: the downside to this approach is that screen readers will only recognize it when jumping between elements, and not when accessed by pointing on the element.

Why Mobile Web Accessibility Matters - Best Practices to Make Your Mobile Site Accessible

Alternative to using text-indent:-9999px:

/** http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ **/
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}