Home | Experience Design

Accessibility – Image replacement

Sarah Graveling
Sarah Graveling
Creative Director
14 July 2008

Up until recently we have always used Fahrner Image Replacement (FIR) technique on our sites because this is great for when stylesheets are turned off. This is important as our focus is on SEO and to make our sites accessible for screen readers.

However, as a recent accessibility study showed if you use this technique then when you switch off images (this method uses background images with hidden text) the users are faced with blank spaces where the images are.

One easy solution for this is the Single Pixel Replacement technique. Putting a clear 1px image in the area with an alt tag. Means that when images are turned off the alt tag is displayed. Neat, but when you then turn off stylesheets the hidden text (FIR) and alt tag (SPR) are duplicated. Which is not good for SEO.

Still with me?

So as a solution we were advised to use the Gilder-Levin (GL) technique. This still uses a background image, but cleverly hides the text behind it.

Cons with this method are that it requires a lot of extra css, involves having an empty span, you can’t use background images and the image needs to be larger than the text. Tricky when users are viewing the site with a large font size.

That sounds like a lot but the pros are that it does everything we require. Good for SEO, good when stylesheets are turned off and good when images are switched off.

Further information on how to do these techniques:
http://mezzoblue.com/tests/revised-image-replacement/

So that was basically my week!

LEAVE A COMMENT

HOME | WHAT WE DO | CULTURE | THINKING | BLOG | REQUEST A CASEBOOK

IGNITING DIGITAL BRANDS | SEO | SOCIAL MEDIA | JOBS | TALK TO US

CELEBRATING 19 YEARS IN DIGTAL
© TAMAR 2014