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

IF YOU LIKED THIS POST, YOU MIGHT ALSO LIKE THESE:

Measuring accessibility – Alt Tags

The Web Content Accessibility Guidelines (WCAG) define the criteria that allows us to measure how accessible...

Accessibility testing and auditing

Accessibility testing When it comes to accessibility testing your website the best way to do it is with...

Is this goodbye to Bobby?

Bobby is a comprehensive web accessibility tool used to aid web designers in creating standard compliant...

Microsoft reflects on 2008.

As the sun goes down on 2008 it is a time for many of us to reflect on what has worked and also that...

Two good reasons to have accessible sites

If your site is not accessible then you could face legal action and suffer terrible publicity. One of...

Grab This Widget