Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: not2easy
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?
I don't use it 'cause
Mainly #2 - Both methods can smell like some of the 'spam' techniques that many sites abuse.
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.
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 :)
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.
"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"
Look at it this way...
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.
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.)
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.
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 :)
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
. But this approach looks promising. Any drawbacks spotted?