All headings are announced, and the links for A-C can be activated by pressing Ctrl-Option-Space bar. The sIFR link can only be activated by pressing Return, and after announcing the sIFR heading, VoiceOver skips out of the viewport, announces the window title, and stops with the cursor on the Back button. Oops.

Safari 1.3 and 2.0:

Only the sIFR heading is clickable. No feedback is given when you hover over the others. All links can be activated by tabbing to them and pressing Return, but only the link in C is outlined, so there is no way to tell if the others have focus.

Not sure which of these techniques actually is the most accessible. I’d avoid sIFR though, mainly for aesthetic reasons. It is cool and all, but I find the flashing as the page loads very annoying.

Using spatial navigation, accessing the Phark Image Replacement and sIFR is impossible using regular spatial navigation.

Using previous/next element navigation (S and W keys) - which is different from navigating links - I am able to get an outline around the sIFR example, but unlike any of the other methods, I can’t actually activate the link.

Using previous/next link (Q and A keys), I can access all of the links, but I am, totally unable to see what I’m accessing.

Voice works in exactly the same way: The links I can access are read out loud, the ones I can’t access are silent.

Perhaps I just don’t understand the debate here. None of the examples make sense, and for me (Firefox on Tiger) only the fourth image is clickable.

An image cannot be a heading, and a heading cannot be an image. Period. There’s a reason that images are not allowed inside elements. Because headings are text, and images are images. Images can represent text, but they cannot BE text, and elements can only contain text — philosophically if not technologically.

If you have a heading, and you don’t want to display the text for it on the screen, but you want an image of it, use an element, set the display properties of the text such that it won’t display on visual user agents, but will be exposed on non-visual user agents (as you discussed in a previous column), and then follow it by an image.

Grumpy’s Dog Food

You could, theoretically, put an alt attribute in the image element as well, but it seems to me that it would be redundant to do so.

<div id=”h_1″>
  <h1 style=”visibility : hidden ; “>Grumpy’s Dog Food</h1>
  <img src=”grumpys_dog_food_header.jpg” alt=”" />
</div>

And if that doesn’t work, just delete my comments and I give up. :-)

Nonsense. It’s perfectly valid to have an image within an element, and if you have something like <h1><img src=”blah” alt=”blah” /></h1> then modern browsers will display the alt text with the appropriate size and weight of the h1 header.

Also, using visibility: hidden will still preserve the space taken up by the h1 text, including all margins and padding. display: none will remove it entirely from the document flow but then you run into the problem of screen readers obeying display: none as well.

As for VoiceOver, that sounds an awful lot like a bug in that application. I assume it reads the alternate text in the HTML, and not the Flash (reading the Flash is kinda impossible, right?), so why it stops after reading it I don’t understand.

Nowadays Google indexes ALT atributes even though the images are not links.

So my question is: Is it still necessary to use methods of css-image-replacement for text content and not to include IMG tag into H1 tag?

Is it still necessary…

In short, YES!

Image replacement was originally for aesthetic purposes, not for SEO. As designers and developers were persuaded to use valid structural markup (some say semantic), many were not pleased with the poor results of large scale fonts with no anti-aliasing and poor kerning. Remember, this is why so many used images for headings in the early years. How can we have good markup and attractive headlines too? Todd Fahrner, a highly regarded W3C member, led the way.

The reasoning is this: Use solid, clean, uncluttered structural markup. Then, put the presentational effects in CSS. Don’t clutter up the HTML with (redundant) images if you can use CSS to display those images instead.

The benefit for SEO purposes wasn’t because of image replacement, but because of well structured HTML markup.

The aesthetic need for attractive headings has not changed. I’m sure the techniques will be around for a long time. So, how do we make then as accessible as possible?

If I turn off images, only Gilder / Levin Image Replacement keeps working. But only as long as I do not resize the page. In addition I have to mess with the code using and / or classes.

I use Phark myself, but that’s just choice.

Something like:

/* for Phark - my preferred image replacement */
#pir {
font-size: 8px; /* for IE/Win */
width: 305px;
height: 35px;
margin: 0;
}

#pir a:active {
background: url("http://access-matters.com/images/glir-active.gif") no-repeat;
/* no PIR active image??? */
}


What’s novel is the height in EMs (allowing expanding of the header area depending on text-size), but you could do this in any of the other methods, and it seems more of a cover-up for IE/mac’s inability to do overflow:hidden than a feature because the background image isn’t going to scale.

[1] http://www.tjkdesign.com/articles/tip_5.asp
Same technique, different implementation. No meaningless element in the markup…

The problem with [1] (mentioned above) is that you can’t change the image w/o changing the markup, so you’ve lost the separation of style from content, which is the main goal of IR. In that, TIP example 5 is really a completely different technique.

What I’d be interested to know is how reliable an image can be sized in relative units so that the default font-size in most browsers would yield the original size of the image. Since the CSS2 browsers can resize px values, the problem remaining is IE/win; the IE user can’t scale text with a font-size in px (without a font style switcher) but you can’t reliably use only relative units due to DPI scaling and the like. Maybe I’ll set up a test page…

Regarding scaling, I agree that it is somehow limited, but my point was just to show how versatile this method was.

Which is that SIRf swf’s can be highlighted with ur cursor and copied as Text into a text document.

How can you highlight an image hey?