Re: Using Background-Image to Replace Text (FIR) etc..
- From: Els <els.aNOSPAM@xxxxxxxxxx>
- Date: Sat, 14 Jan 2006 15:51:09 +0100
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> </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 -
.
- Follow-Ups:
- Re: Using Background-Image to Replace Text (FIR) etc..
- From: Charlie King
- Re: Using Background-Image to Replace Text (FIR) etc..
- References:
- Using Background-Image to Replace Text (FIR) etc..
- From: Charlie King
- Using Background-Image to Replace Text (FIR) etc..
- Prev by Date: Using Background-Image to Replace Text (FIR) etc..
- Next by Date: Re: Using Background-Image to Replace Text (FIR) etc..
- Previous by thread: Using Background-Image to Replace Text (FIR) etc..
- Next by thread: Re: Using Background-Image to Replace Text (FIR) etc..
- Index(es):
Relevant Pages
|
