Image replacement techniques replace plain text with images. This allows designers to show fancier visuals to web site visitors who have that capability. The challenge with image replacement techniques (because, after all, you can just delete text and insert an image) is to maintain the text for maximum accessibility while the image replaces the text for visitors who wish to see images.

I’ve been doing some brainstorming and reviewing old techniques for image replacement. This file just shows some preliminary experimentation with CSS image replacement.

My criteria for truly successful image replacement is:

  • Functions with CSS + images
  • Functions with CSS and no images
  • Functions for screen readers (to the best of my knowledge)
  • Functions with no CSS and no images
  • Does not require any extra tags (though I will insert a span tag or an img tag failing to achieve all of the former)