Is FLIR image replacement accessible to people with visual impairment?

Accessibility
1

Hello, a quick question about facelift image replacement An alternative to sIFR: Facelift Image Replacement | Breathe new life into your web pages. Would be great if someone could take a look and comment.

I need to know how the experience is for people with visual impairment. Here is what’s being sent to the user:

<span id="breath" class=" flir-replaced">
<img class="flir-image" alt="Breathe new life into your web pages." src="/js/facelift/generate.php?text=Breathe%20new%20life%20into%20your%20web%20pages.&h=41&w=644&fstyle=%7B%22mode%22%3A%22%22%2C%22output%22%3A%22auto%22%2C%22cSize%22%3A%2236%22%2C%22cColor%22%3A%22rgb%2831%2C%2031%2C%2031%29%22%2C%22cFont%22%3A%22decorative2%22%2C%22realFontHeight%22%3A%22false%22%2C%22dpi%22%3A%2296%22%2C%22cBackground%22%3A%22transparent%22%2C%22cSpacing%22%3A%22%22%2C%22cLine%22%3A%220.6222%22%2C%22cAlign%22%3A%22start%22%2C%22cTransform%22%3A%22none%22%7D" style="border: medium none;">
</span>

There is an ALT tag which repeats what is being shown as image text. So far so good. But if used as a headline, for example, will the user realise that this is a headline? e.g.

<h1 class="pagetitle flir-replaced">
<img alt="Where we work" src="/behaviour/facelift1.2/generate.php?text=Where%20we%20work&h=41&w=956&fstyle=%7B%22mode%22%3A%22wrap%22%2C%22cSize%22%3A%2226%22%2C%22cColor%22%3A%22rgb%28132%2C%20127%2C%20128%29%22%2C%22cFont%22%3A%22verdana%22%2C%22cAlign%22%3A%22start%22%2C%22cTransform%22%3A%22none%22%2C%22cLine%22%3A%221.1538461538461537%22%2C%22cSpacing%22%3A%22%22%2C%22cOpacity%22%3A%221%22%2C%22realFontHeight%22%3A%22true%22%2C%22dpi%22%3A%2296%22%7D" style="border: medium none;">
</h1>

I’m not sure what experience a person will have who isn’t able to see the context visually on screen.

Should a different font-replacement solution be used?

Many thanks.

2

The ideal is to have the text there and place the image over the top of it, like here:

Header replacement

However, testing your current setup on Mac with Safari’s VoceOver screen reader: it reads out the alt text, and then tells the user that the element is empty and has just a gif image instead. Kind of annoying and handy at the same time.

3

The problem that I have with this sort of thing is that the replacement text is not going to be any bigger on my screen (using a larger base font size) than it would be on yours: so, if the text is not already big enough for me to see clearly, it’s going to stay that way. On balance, if I must have a fancy font pushed at me, I would prefer to see @fontface, rather than image replacement, despite its own (more minor) issues.

4

Yes, most trickery on the web reduces usability to some extent.

5

First I had to go “what the devil does Forward Looking Infrared have to do with image replacement?” – then I find out it’s a SiFR alternative, something I’d never use in the first place… then I find out it’s nothing more than a overglorified and PISS POOR per request IMG tag – meaning it has NOTHING TO DO with image replacement?!?

Do yourself a favor, and either use webfonts, or use a classical image replacement method like the one Ralph.m linked to. That is presentation applied to text, as such an IMG tag has NO BLOODY BUSINESS in the markup in the first place!!!

6

Not to mention, of course, the fact that generating an image every time the user views the page can seriously inflate server load.

7

There, fixed.