I mentioned the phrase ‘Image Replacement’ in my interview with Blair Millen. A few days later I was asked what this was. So in response to this ‘web wondering’ I will briefly explain what Image replacement is, how it looks on screen and provide links to resources for further reading.
What is Image Replacement?
Put simply, Image Replacement is the act of using CSS to replace an image with text should that image not be displayed. Although there is the HTML alt attribute (the text you see when you hover over an image) which does something similar and that is screen reader friendly, Image Replacement makes for a far more ‘friendly’ user experience.
Although the Alt attribute is great for explaining what an image is, it degregates the user experience somewhat if the image is not visible and the tiny Alt attribute is displyed.
See Image Replacement in action.
To demonstrate this visually, look at the three images below. On the left is our first website with the images visible and on the right they have been turned off. On the final image underneath, the same site is displayed with images off and no Image Replacement. You can quite clearly see the difference in the visibility of the text with and without the image replacement technique.
There’s no easy fix.
There are loads of techniques out there from the Fahrner technique to the Leahy/Langridge to the Phark technique (links coming later) and they each come with their own pros and cons. For example:
some are (ironically) not accessible for screen readers,
some require the use of extraneous mark up,
some display nothing when images are off and CSS in on.
Finding a solution:
While it can be argued that Image Replacement may not be necesary it may be something that you do want to cater for on your accessible website.
With this article we do not intend to go over each and every option available to you. However, you will find a whole host of Image Replacement techniques and further reading at the links below.