Image replacement technique

I believe that this image replacement technique works for people with screen reading software. It will make some body’s life easier.

This technique keeps the text visible to the screen reader software and hidden to the user.

This is what you need to do:

<div class=’ReplaceWithImage’>
Invisible Text
</div>

And this CSS code:

.ReplaceWithImage
{
  background: url(image.jpg);
  text-indent: -7777px;
}

What it does :
I moves text 7777 pixels to the left and places image in it’s place.