Fahrner Image Replacement (FIR)

what's the verdict

[bill]

This thread [webmasterworld.com] over in the HTML Forum got me thinking...where choster says:

As we learned after Fahrner image replacement, we should hold off on making sweeping changes to the markup unless a problem is truly evident. msg #:6

Is the Fahrner Image Replacement technique already on everyone's design blacklist? Do any of you use it?

[mipapage]

Hey bill,

I don't use it 'cause

1. <personal>I like the look of text on a webpage, as text and not an image</personal>
   
2. I'm not convinced that SE's will necessarily like it
   
3. Though I stopped following it after a bit, I recall that screen readers couldn't do much with it (though they did well with the methods that offset the text off of the page using negative values and positioning)
   

Mainly #2 - Both methods can smell like some of the 'spam' techniques that many sites abuse.

[grahamstewart]

I haven't used it - but it's not on my blacklist and it seems like a perfectly reasonable thing to do to me.

I'd be interested to know what the supposed problems with screen readers are tho. I can't see how it would be a problem for them.

[bill]

If I read it correctly, when using the display:none it would effectively hide the text from the screen readers...just like a regular image, so there's no benefit for accessibility in that sense.

[grahamstewart]

Yeah, but the whole point of the technique is that it allows you to serve the site with alternate stylesheets (or with no stylesheet at all). So presumably your accessibility stylesheet would not replace the text with an image.

[DrDoc]

But many of the screen readers don't understand "aural" as a media type either...

[grahamstewart]

Absolutely, I was more suggesting 'alternate' stylesheets probably with a Javascript switcher to help those with less capable browsers that don't support multiple stylesheets (hands up Internet Explorer).

Either that or a 'Click here for a plain text version of this site' type thing - where the same HTML would be served but just no stylesheet.

[bill]

I'm still leaning toward using the Fahrner Image Replacement technique on some new sites for some of the same reasons grahamstewart points out. It seems logical, and would work well with your accessibility and print stylesheets...Why is there such bad word of mouth over this technique?

[DrDoc]

would work well with your accessibility and print stylesheets...Why is there such bad word of mouth over this technique?

Because the "accessibility features" get canceled out. Either the text is not read (no matter if you use display:none or visibility:hidden) or, even if you use an aural stylesheet, many screen readers simply do not understand that media type. If anything -- use padding to force the letter out of view.

If you're going to use a technique like this at all -- don't wrap the first letter in a span, since this may cause a word like <span>T</span>est to be read "T est". Use the :first-letter pseudo instead :)

[grahamstewart]

Because the "accessibility features" get canceled out. Either the text is not read (no matter if you use display:none or visibility:hidden)

Yeah, but my point was that FIR allows you to offer the user a choice between different stylesheets. Not all of these stylesheets would perform the replacement and hence would work well with accessibility tools.

As you know I think accessibility is an important area - but I don't think this is an unreasonable approach.

[mattur]

There's an alistapart article "Facts and Opinion About Fahrner Image Replacement" written by Joe Clark which may be of interest.

Excerpt:
"Unfortunately, Fahrner Image Replacement cannot be said to be an accessible web technique when used for text. Screen-reader users either already cannot read any text marked up that way or will not be able to in the future when the software is updated to interpret CSS correctly"

[grahamstewart]

Yep, I'm agreeing that the technique itself is not accessible. But I believe that it's use allows us to produce accessible pages that we otherwise could not produce.

Look at it this way...

The Problem

You want to use nice <h> tags to markup your document. You know its the 'right' thing to do and it will be usable to peope with screen readers.

But your boss/client/mother-in-law insists that <h> tags look too boring and you should use those pretty, inaccessible, bandwidth-sucking images that the graphics department produced.

So...

Solution One - non-FIR
You could go ahead and just replace all the <h> tags with <img> tags, after all the screen reader can read the alt text right?

But now you have just ruined the semantic purity of your HTML, meaning if your site style changes you will have to change the HTML as well as the CSS.

Furthermore, it is now much more difficult for you to support multiple stylesheets.

Solution Two - FIR
Instead you could use FIR to replace the <h> tags with images in the CSS. As pointed out this is NOT good for acessibility.

However, you can now supply a second 'alternate' stylesheet which DOESN'T activate the FIR and the <h> tags will be present in all their glory. You might refer to this as your 'Text View', or your 'Low Bandwidth' view.

In fact, the user can benefit without you even doing this, because modern browsers allow them to turn the stylesheet off themselves (with a single click in Opera).

(You might also choose to use have the <h> tags visible in your print or handheld stylesheets.)

Conclusion

Yes, its not perfect. But then perhaps screen readers could do themselves and us a favour by supporting the 'aural' stylesheet.

Given the situation above I would use FIR every time.

[DrDoc]

See, you're taking it one step further, grahamstewart... :)
FIR in itself shouldn't be used (my opinion) unless you take a different approach to fix the inherent problems -- such as provide an alternative stylesheet. Then, all of a sudden, you have come up with a solution to the problem, and an extremely accessible solution at that!
As for using FIR alone -- I think it's a bad idea. I think there are better methods of replacing text, ones that are already accessible...

[bill]

As for using FIR alone -- I think it's a bad idea. I think there are better methods of replacing text, ones that are already accessible...

Could you point me toward some of those methods DrDoc? Are these the 'FIR alternatives' that are usually discussed when FIR comes up?

[DrDoc]

Let's take a heading as an example...
Give it a top padding (equal to the height of the image you want to use)... set overflow to hidden... Then apply the image as background to the heading.

Works great for screenreaders and people without CSS capabilities.
The only downside would be those that browse without images...

You can apply the same principle to create a drop-cap effect. Use padding to shove the actual letter out of view, and then the image as a background. Just remember to use the :first-letter pseudo instead of wrapping the letter in a span tag :)

[DrOliver]

What about this one:

Accessible Header Images With CSS And XHTML [sitepoint.com] by Sitepoint.

As long as CSS 3 hasn't seen the light (and as long as browsers won't get it right) you're going to need an extra

<span>

. But this approach looks promising. Any drawbacks spotted?

[firstreflex]

I prefer the Leahy/Langridge Method.
[kryogenix.org...]
No need for the superfluous span tag.

[DrOliver]

It seems that both methods won't help if images are turned off and CSS is on.