Using Background-Image to Replace Text (FIR) etc..

As I understand it, the use of FIR* to replace heading tags with
images in visually enabled CSS browsers is now frowned upon on the
basis that some screen readers will *nor* read back text that is
marked up by CSS to be invisible or hidden.

So...

If I want to replace headings with images (because my client wants to
use his specific font for headings where possible), what's the best
way to do it?

Clearly, I can use img tags with the relevant alt tag, but that loses
me the importance structure that H tags would give me which, in turn,
loses hierarchical structural integrity and, more importantly,
accurate search-engine interpretation.

In more detail:

In the code snippet below, 'MainTitle8' and 'SubTitle5' are titles
that should have the importance of H1 and H2 respectively.

<div id="content-text">
<p><img src="images/MainTitle8.gif" /></p>
<p><img src="images/Recette1.jpg" /></p>
<p>Marc Wery, Professeur de Cuisine. <br />
Conseiller Culinaire. <br />
Finaliste du Grand Prix Escoffier 1995. <br />
3éme au Trophée Européen 1995.</p>
<img src="images/SubTitle5.gif" align="left" />
<p>&nbsp;</p>
<img src="images/Recette2.jpg" class="imgLeftFloat" />
...etc

With FIR, I would do something like...

<div id="content-text">
<span><h1 class="swap">My main heading</h1></span>
<p><img src="images/Recette1.jpg" /></p>
<p>Marc Wery, Professeur de Cuisine. <br />
Conseiller Culinaire. <br />
Finaliste du Grand Prix Escoffier 1995. <br />
3éme au Trophée Européen 1995.</p>
<span><h2 "class=swap">My sub heading</h2></span>
<p>&nbsp;</p>
<img src="images/Recette2.jpg" class="imgLeftFloat" />
...etc
....and CSS like ...

h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}

h2.swap {
height:18px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}


h1#content-text {
background-image:url("images/MainTitle8.gif");
}
h2#content-text {
background-image:url("images/SubTitle5.gif");
}
...etc

That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.

Now, I gather, that's a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.

How is anyone else doing this?

*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)

Cheers

--
Charlie

Charlie King wrote:

As I understand it, the use of FIR* to replace heading tags with
images in visually enabled CSS browsers is now frowned upon on the
basis that some screen readers will *nor* read back text that is
marked up by CSS to be invisible or hidden.

So...

If I want to replace headings with images (because my client wants to
use his specific font for headings where possible), what's the best
way to do it?

Clearly, I can use img tags with the relevant alt tag, but that loses
me the importance structure that H tags would give me which, in turn,
loses hierarchical structural integrity and, more importantly,
accurate search-engine interpretation.

Not if you mark them up as
<h1><img src="..." alt="MainTitle8"></h1>

In more detail:

In the code snippet below, 'MainTitle8' and 'SubTitle5' are titles
that should have the importance of H1 and H2 respectively.

<div id="content-text"
<p><img src="images/MainTitle8.gif" /></p
<p><img src="images/Recette1.jpg" /></p
<p>Marc Wery, Professeur de Cuisine. <br /
Conseiller Culinaire. <br /
Finaliste du Grand Prix Escoffier 1995. <br /
3éme au Trophée Européen 1995.</p
<img src="images/SubTitle5.gif" align="left" /
<p>&nbsp;</p
<img src="images/Recette2.jpg" class="imgLeftFloat" /
...etc

With FIR, I would do something like...

<div id="content-text"
<span><h1 class="swap">My main heading</h1></span

You can't put an <h1> inside a <span>

...and CSS like ...

h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}

That implies the span is inside the h1 (where it should be instead of
outside like your html says)

h1#content-text {
background-image:url("images/MainTitle8.gif");
}

Your CSS isn't correct for your HTML. The above selector would have to
be "div#content-text h1" instead of "h1#content-text".

That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.

You would have had to set a height to the h1 as well, as I think it
would collapse without content.

Now, I gather, that's a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.

Display:none is generally not read, so indeed, a no-no.

How is anyone else doing this?

Like I said:
<h1><img src="image.jpg" alt="replacement of title in image"></h1>

*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)

As they say on that page:
"The original technique (FIR) described in the body of this article is
no longer recommended for use, as it makes the hidden text completely
inaccessible for certain screen readers. Instead, see one of the
alternative techniques mentioned at the end of the article under
“Important Notes�."

I don't like the three alternative methods from those 'important
notes' section either though. The less trickery, the better imo.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On Sat, 14 Jan 2006 15:51:09 +0100, in
<1tms2qwuuzvy2.17opcpmolm8au$.dlg (AT) 40tude (DOT) net>
(comp.infosystems.www.authoring.stylesheets) Els
<els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Not if you mark them up as
h1><img src="..." alt="MainTitle8"></h1

Ah OK, for some reason I'd not even considered that! Thanks.

With FIR, I would do something like...

<div id="content-text"
<span><h1 class="swap">My main heading</h1></span

You can't put an <h1> inside a <span

Oops - typo. But I hope the principle was clear.

...and CSS like ...

h1.swap {
height:22px;
background-repeat:no-repeat;
}
h1.swap span {display:none;}

That implies the span is inside the h1 (where it should be instead of
outside like your html says)

Indeed.

h1#content-text {
background-image:url("images/MainTitle8.gif");
}

Your CSS isn't correct for your HTML. The above selector would have to
be "div#content-text h1" instead of "h1#content-text".

That'll teach me to knock out a quick post without uploading my
example code to a webserver and checking it first! Hopefully, though,
it was reasonably illustrative of what I was attempting to discuss.

That way, CSS enabled visual browsers would get the image of the
title, and anything else would get the plain old H1 or H2.

You would have had to set a height to the h1 as well, as I think it
would collapse without content.

Indeed, but as this is talking about what I'm no longer proposing to
do, the point is moot

Now, I gather, that's a no-no now, because some screen readers do
interpret the CSS, and so would not see the hidden H tags.

Display:none is generally not read, so indeed, a no-no.

Agreed.

How is anyone else doing this?

Like I said:
h1><img src="image.jpg" alt="replacement of title in image"></h1

And, like I said: thanks

*(Fahrner Image Replacement - see
http://www.stopdesign.com/articles/replace_text/ for a far better
explanation than I can give)

As they say on that page:
"The original technique (FIR) described in the body of this article is
no longer recommended for use, as it makes the hidden text completely
inaccessible for certain screen readers. Instead, see one of the
alternative techniques mentioned at the end of the article under
“Important Notes”."

That, and other similar comments, was what prompted me to revise my
habit...

I don't like the three alternative methods from those 'important
notes' section either though. The less trickery, the better imo.

I didn't like them either, for the same reason, which was what brought
me to to ask about peoples' current solutions.

Just out of interest, why was (and indeed is) FIR preferred over
putting an image and alt text inside an <hn></hn> pair? The technique
is all over places like CS Zen Garden, for example.
--
Charlie

Charlie King wrote:

Just out of interest, why was (and indeed is) FIR preferred over
putting an image and alt text inside an <hn></hn> pair?

I don't know...

The technique
is all over places like CS Zen Garden, for example.

Zen Garden isn't a good example of semantic code, it's only meant as a
showcase of what CSS is capable of design wise.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On 2006-01-14, Charlie King <charlie (AT) removethisitsaspamtrap (DOT) stopthatitssilly.com> wrote:

As I understand it, the use of FIR* to replace heading tags with
images in visually enabled CSS browsers is now frowned upon on the
basis that some screen readers will *nor* read back text that is
marked up by CSS to be invisible or hidden.

tell them to read it:

speak:inherit;

possibly another option would be to use <img ... > tags in the HTML with
apropriate alt attributes.

Bye.
Jasen

On Sat, 14 Jan 2006 16:45:44 -0600, in
<42tdchF1l2dddU1 (AT) individual (DOT) net>
(comp.infosystems.www.authoring.stylesheets) kchayka <usenet (AT) c-net (DOT) us>
wrote:

Charlie King wrote:

Just out of interest, why was (and indeed is) FIR preferred over
putting an image and alt text inside an <hn></hn> pair?

The only thing that might benefit from FIR is search engines, many
(most?) of which do not index alt text, except possibly in image links.

All FIR techniques have problems, some are worse than others. Most do
poorly in graphical browsers when image loading is disabled. Worst case
is the content becomes inaccessible.

I'm pretty much sold on the idea that FIR is a Bad Thing(tm) - and I'd
thought I was being so clever using it, too!

But that still leaves me with the problem of wanting to use specific
fonts and/or styling, without compromising accessibility or
sacrificing SEO - hence my posting the question.

At the moment, I do what I can to talk clients out of anything that
can't be done with plain simple HTML and CSS - but it would be nice to
have a suitable compromise. Do we know whether or not search engines
read alt text inside an <hn></hn> pair?
--
Charlie

On Sun, 15 Jan 2006, Charlie King wrote:

But that still leaves me with the problem of wanting to use specific
fonts and/or styling, without compromising accessibility or
sacrificing SEO - hence my posting the question.

I'm assuming that the "specific fonts" you are referring to are ones
which the average reader wouldn't be expected to have.

I wouldn't say that I'd actually *recommend* this, but if the site's
sponsors are, like so many, narrow-minded enough to believe that MSIE
is the only browser, you could use MS WEFT[1] to supply specific
font(s) in embedded format to MSIE and get the visual results that
they wanted, in such a way that it does no harm to www-compatible
browsers. If it's only needed for a few headlines, it may only need a
few different letters in the embedded "font object", so it could be
quite small - comparable with the size of an inline image.

No, I'm not really enthusiastic about that answer, but it *is* a
fairly harmless technique if it fits your design constraints, and if
you apply it appropriately. Other browsers will harmlessly disregard
the relevant CSS/2.0 properties, either because they don't implement
them (the CSS rules for dealing with unimplemented features guarantee
that), or because, even if they understand the @font-face directive,
they recognise that the embedded font format is not one that they can
use.

At the moment, I do what I can to talk clients out of anything that
can't be done with plain simple HTML and CSS - but it would be nice
to have a suitable compromise.

Well, the only other option for getting the desired visual results
*does* seem to be an image of text. If it's only decorative then it
could be put into the background; otherwise, out of all the trick
techniques that I've seen, I haven't seen one that seems to be overall
better than the plain and simple <img> with appropriate alt= text.
I'm not saying that's ideal, but it seems to me to be the least-bad
recourse if the site's sponsor insists.

Do we know whether or not search engines read alt text inside an
hn></hn> pair?

This is reasonably well known and documented at search engine review
sites, AFAIK. Last that I heard, the regular Google database (not the
images one) will only include ALT texts in its indexing if they are
inside <a href=...> links. Altavista used to index all ALT texts, but
my knowledge about that may be way out of date.

If we're talking about a heading which identifies the company or
organisation, then all of the non-"Home"[2] pages can link to their
"Home" page from this "heading", and you're pretty much home and dry.
The actual Home page shouldn't link to the Home page itself (it's poor
practice for a page to offer link(s) to itself, except where you're
jumping to anchors within the page), but presumably something useful
can be linked from there too - a German home page might link to the
obligatory "Impressum" page, which gives the details of who is legally
responsible for the site contents, copyright claims etc., and we could
well do something similar.

h t h

[1] The more cautious MSIE users who set enhanced security options
against untrusted web sites, will get a security alert about
downloading an embedded font, but the site's sponsors almost certainly
won't be discerning enough to realise that or worry about it.

[2] Just a routine note that in the original TimBL concept of a site's
structure, he distinguished between a "Home" page and a "Welcome"
page, and in my opinion this is still a reasonable distinction to keep
in mind. http://www.w3.org/Provider/Style/Etiquette.html

On Sun, 15 Jan 2006 13:44:55 +0000, in
<Pine.LNX.4.62.0601151259200.4614 (AT) ppepc62 (DOT) ph.gla.ac.uk>
(comp.infosystems.www.authoring.stylesheets) "Alan J. Flavell"
<flavell (AT) ph (DOT) gla.ac.uk> wrote:

On Sun, 15 Jan 2006, Charlie King wrote:

But that still leaves me with the problem of wanting to use specific
fonts and/or styling, without compromising accessibility or
sacrificing SEO - hence my posting the question.

I'm assuming that the "specific fonts" you are referring to are ones
which the average reader wouldn't be expected to have.

Indeed. In fact, I would only look to do this where a significant
majority of browsers wouldn't be expected to have a font that was even
close - for example when an exotic font is part of a client's
identity.

I wouldn't say that I'd actually *recommend* this, but if the site's
sponsors are, like so many, narrow-minded enough to believe that MSIE
is the only browser, you could use MS WEFT[1] to supply specific
font(s) in embedded format to MSIE and get the visual results that
they wanted, in such a way that it does no harm to www-compatible
browsers. If it's only needed for a few headlines, it may only need a
few different letters in the embedded "font object", so it could be
quite small - comparable with the size of an inline image.

I'll look into that, if only because it's not something I'd ever
considered. Generally, however, I would encourage a website's sponsor
that there are a lot of non-MSIE user agents out there, and that the
only reliable way to maximise readership access is to stick to the
standards.

No, I'm not really enthusiastic about that answer, but it *is* a
fairly harmless technique if it fits your design constraints, and if
you apply it appropriately. Other browsers will harmlessly disregard
the relevant CSS/2.0 properties, either because they don't implement
them (the CSS rules for dealing with unimplemented features guarantee
that), or because, even if they understand the @font-face directive,
they recognise that the embedded font format is not one that they can
use.

No harm in learning something new, though!

At the moment, I do what I can to talk clients out of anything that
can't be done with plain simple HTML and CSS - but it would be nice
to have a suitable compromise.

Well, the only other option for getting the desired visual results
*does* seem to be an image of text. If it's only decorative then it
could be put into the background; otherwise, out of all the trick
techniques that I've seen, I haven't seen one that seems to be overall
better than the plain and simple <img> with appropriate alt= text.

That would seem to be the consensus. I'd be fully sold if I could be
sure that search engines will read the alt text, and assign to it the
importance that the surrounding <hn> tags suggest.

I'm not saying that's ideal, but it seems to me to be the least-bad
recourse if the site's sponsor insists.

....which is what site sponsors are wont to do!

Do we know whether or not search engines read alt text inside an
hn></hn> pair?

This is reasonably well known and documented at search engine review
sites, AFAIK. Last that I heard, the regular Google database (not the
images one) will only include ALT texts in its indexing if they are
inside <a href=...> links. Altavista used to index all ALT texts, but
my knowledge about that may be way out of date.

Well that's reassuring.

If we're talking about a heading which identifies the company or
organisation, then all of the non-"Home"[2] pages can link to their
"Home" page from this "heading", and you're pretty much home and dry.
The actual Home page shouldn't link to the Home page itself (it's poor
practice for a page to offer link(s) to itself, except where you're
jumping to anchors within the page), but presumably something useful
can be linked from there too - a German home page might link to the
obligatory "Impressum" page, which gives the details of who is legally
responsible for the site contents, copyright claims etc., and we could
well do something similar.

That's not really what I'm after - your earlier remarks covered what I
was talking about

h t h

It does, thanks.

[1] The more cautious MSIE users who set enhanced security options
against untrusted web sites, will get a security alert about
downloading an embedded font, but the site's sponsors almost certainly
won't be discerning enough to realise that or worry about it.

But, as their supplier, it would behoove me to warn them.

[2] Just a routine note that in the original TimBL concept of a site's
structure, he distinguished between a "Home" page and a "Welcome"
page, and in my opinion this is still a reasonable distinction to keep
in mind. http://www.w3.org/Provider/Style/Etiquette.html

I agree with the concept, but I think that for many purposes the two
needs can be met with the same page... but that's a whole new kettle
of fish!
--
Charlie

On Sun, 15 Jan 2006, Charlie King wrote, quoting me:

If we're talking about a heading which identifies the company or
organisation, then all of the non-"Home"[2] pages can link to
their "Home" page from this "heading", and you're pretty much home
and dry. The actual Home page shouldn't link to the Home page
itself
[...]

That's not really what I'm after - your earlier remarks covered what
I was talking about

Just in case there's been some misunderstanding here (I couldn't
really be sure), let's try an action replay, if I may.

We're starting with this sort of thing as a basis, for your
appropriate choice of N, and of image format:

<hN><img src="foocorp.img" alt="Foo Corp." ...></hN>

However, the alt text stands a better chance of being indexed, across
search services, putting the image inside a link, along these lines -

<hN><a href="/"><img src="foocorp.img" alt="Foo Corp." ...></a></hN>

assuming that href="/" is a reference to the web site's "home" page.
(With suitable CSS styling, optional title= attributes, etc.)

I was just saying that if this also appears on the "home" page itself,
it would be good practice not to link that one to the same page; some
other appropriate page could be found for linking to. Just what that
page should be, is up to you - I suggested something like the German
"Impressum", but - whatever you choose, really.

hope that makes sense

On Sun, 15 Jan 2006 19:58:16 +0000, in
<Pine.LNX.4.62.0601151933060.20703 (AT) ppepc55 (DOT) ph.gla.ac.uk>
(comp.infosystems.www.authoring.stylesheets) "Alan J. Flavell"
<flavell (AT) ph (DOT) gla.ac.uk> wrote:

However, the alt text stands a better chance of being indexed, across
search services, putting the image inside a link, along these lines -

hN><a href="/"><img src="foocorp.img" alt="Foo Corp." ...></a></hN

That's worth knowing...

assuming that href="/" is a reference to the web site's "home" page.
(With suitable CSS styling, optional title= attributes, etc.)

I was just saying that if this also appears on the "home" page itself,
it would be good practice not to link that one to the same page; some
other appropriate page could be found for linking to. Just what that
page should be, is up to you - I suggested something like the German
"Impressum", but - whatever you choose, really.

hope that makes sense

.... however that's not quite what I was after. I'm looking for the
best way to keep the sponsor's wierd font for, say, all H1 and H2
headings - such that the site will still work as intended in
non-visual browsers, with images turned off, and in search engines.

So a page heading like "Our Latest Range Of Perpetual Motion
Mousetraps" should, where possible, be in 24pt Mousetrap, as well as
having the actual textual value "our latest range of perpetual motion
mousetraps", and be assigned the importance H1 for text-only
browsers, readers and search engines.

FIR achieved that, kind of, but bends the standards and breaks some
screen readers.

<H1><img src="PMMousetraps.img" alt="Our Latest Range Of Perpetual
Motion Mousetraps" ...></H1> seems to be the current favourite, but
for some doubt as to whether the alt text would be indexed by a search
engine and, if so, if it would be indexed at H1 importance. It has
the distinct advantage of being non-sneaky and well within the spirit
of HTML and CSS standards (so the search engines ought to like it!).

You suggest that making the image a link increases the chance of its
being indexed, which is good, but a) I still don't know if it'll get
H1 importance and b) I'm left with the problem of where to link all of
these headings to...

It's a sad fact that the motives of the search engines are almost as
important as the motives of the readers when creating a site with any
kind of commercial bent. One ignores them at one's peril, no matter
how much one would like to make an exclusively user-oriented site.
--
Charlie