1 A FIR That Doesn't Lose Text

What if the user has images turned off and views a page with FIR?

Unfortunately that user views nothing more than white space. Stuart Langridge has featured his own FIR called “A new image replacement technique.” Instead of abolishing the text with display:none, we can just use an empty <span> tag to place an image over the text. Although this adds a small markup, this method allows users with CSS on and images off to read the text.

To get to my point, wouldn’t this method work in all the screen readers? I would think so because the text is always there.

posted at 09:00 pm on October 21, 2003 by Ryan Gasparini

2 Yes, what about the Leahy / Langridge hack?

I was surprised not to see any mention of the Leahy / Langridge hack, which has been public for a while now (there was even a link from Jeffrey’s web site…) Testing this one would have been interesting, as it seems to fail only in the “CSS but not images” scenario.

Just in case: This alternative technique consists in pushing the text down with a padding as high as the image, and hide the characters using the overflow property. More at:
http://www.moronicbajebus.com/playground/cssplay/image-replacement/
http://www.kryogenix.org/code/browser/lir/

Anyway, congratulations for the redesign. It looks cleaner. And it validates, apparently ;-)

posted at 10:23 pm on October 21, 2003 by Nicolas Prade

3 ..And what about search engines?

Great article!

I just posted the below message to Douglas Bowman/stopdesign:
———-
Thanks for a helpful article.

My concern is not only with screen readers, but also search engines. As you might or might not know, title tags are vital to search engine indexing. I’m designing and building web solutions based on my own CMS, and i work closely with a colleague whose focus is on SEO (search engine optimization).

SEO is not my trade, so I don’t know how i.e. Google works, but I can’t risk the title not being indexed/disregarded because it’s hidden (visibility: none). Any thoughts/experiences on this?

Final thought. The Fahrner image replacement technique makes the text unselectable. This could be overcome using a script to swap the image with the text, eventually hide the image if it’s just an overlaying layer.

posted at 01:21 am on October 22, 2003 by Inge Jørgensen

4 SEO and Accessibility

That’s the beauty of Stuart Langridge’s FIR at Kryogenix. The text is “always on” and available for screen readers or search engines and visible with images off. I use his technique on my website.

posted at 01:34 am on October 22, 2003 by Ryan Gasparini

5 Fahrner Audio Replacement

I am not familiar with aural stylesheets, but conceivably a similar technique could be used to render (play) some sound file instead of the element’s text, using the cue property for example.
Also, screen-readers might need to have speak:normal in addition to display:none to selectively read a FIR’d element.

posted at 03:21 am on October 22, 2003 by Victor Jalencas

6 Why what's missing is missing

The article went through many betas in the summer, and then I left it in J the Z’s hands for the ALA relaunch. There’s been as much development on FIR since I wrote the piece as there had been immediately before, as the first graf states.

posted at 03:30 am on October 22, 2003 by Joe Clark

7 Accessible Header Images With CSS And XHTML

Hi,

Sitepoint has an article that appears to solve the accessibility issue. I haven’t implemented the technique myself but it seems to be sound:
http://www.sitepoint.com/article/1221/1

Thanks,
Terry

posted at 06:09 am on October 22, 2003 by Terry Melanson

8 Imported or linked stylesheet (and more...)

Your article doesn’t mention the differences between imported and linked stylesheet for the screen-reader. It seems to matter.
Anyway, the problem of screen reader is already solved by the Leahy / Langridge hack. Even better if we use negative text-indent instead of padding. Another way of addressing the problem, working only with flat color images, is to use font-size: 1px, eventually with negative letter-spacing, and same font-color than the background color of the image.
Just one problem remains: css on + image off. But is this really an accessibility problem? I’m not sure. Bye!

posted at 06:51 am on October 22, 2003 by Maurizio Boscarol

9 Would the Tantek hack work for screen readers?

I use FIR sporadically throughout our site.

Due to the fact that the machines here running ie 5.0 also are usually set to 480×600, the desired effect tends to fail. So I’ve implemented the Tantek hack.

Wouldn’t this also suffice for screen readers?

Thanks for the article,

Andy

posted at 07:54 am on October 22, 2003 by Andrew Schillinger

10 Jaws

Sadly the public beta expires on the 30th October 2003 and is only time unlimited for current registered users.

posted at 08:41 am on October 22, 2003 by Tom Robinson

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)