Motivación

1. Quiero una imagen en mi botón/enlace/elemento de menú/loquesea
2. Quiero que los que no vean las imágenes (navegadores modo texto, bots, lectores de pantalla, etc.) tengan un texto equivalente
3. Quiero que los demás no vean ese texto

HTML:

<div class="miclase">Mi texto alternativo</div>

CSS:

.miclase {
 text-indent: -100em;
 overflow: hidden;
 background: url(miimagen.png) no-repeat;
 height: 100px;
 width: 100px;
 }