Weblogs: Web Accessibility

The Fahrner Image Replacement is a technique for replacing the text on a page with an image equivalent using CSS. The digital-web define FIR as "a vital cornerstone in all future Web Design". The main idea behind this technique is that the text being replaced remains accessible to devices like screen-readers.

Unfortunately using the original technique, the text itself has proven to be inaccessible in both the JAWS screen-reader and IBM's Homepage Reader. Joe Clark documented the problem and created some test cases, and the process of defining a fixed solution began in earnest.

Over the past two weeks a number of accessible solutions (via Accessify) have been published that allow speech browsers to still access the text and allow the CSS image background to be used as stylised text.

Update 9 August: Looks like the technique isn't quite out of the woods yet, as Jukka Korpela notes on alt.html:

I did not find a solution to the problem that when CSS is enabled and images are disabled, using background image and suppressing text display does not work well.

Accessify is offering a sticky-bun for the one solving this particular problem.

Further Reading

• stopdesign: Using background-image to replace text
• stopdesign: More on background-image II
• zeldman: CSS background problems
• zeldman: FIR flies
• digital-web: In defense of Fahrner Image Replacement
• Simon Willison: A better image replacement technique
• Russell Beattie: The new generation web design
• Tom Gilder: Gilder Image Transform technique
• mezzoblue: Digital Web Article Posted

---

[ Weblog | Categories and feeds | 2011 | 2010 | 2009 | 2008 | 2007 | 2006 | 2005 | 2004 | 2003 | 2002 ]