Replacing Text With Images

[danm68]

(First off this is not so much a problem I'm having with css, but an issue with a technique and I am curious for the thoughts of others on this topic.)For those not familiar with techniques like F.I.R. it is where you replace text with an image to either make it look nicer, or so you can use a certain font which others may not have.However there are many techniques that do this, yet they bring up problems of screen readers not reading the actual text because of css codes such as 'display:none;' and 'visibility:hidden;' hiding them from screen readers.I haven't really researched this or anything, but what is the whole problem? Please read this example and tell me if I've missed something.Ok, say we want to replace the word 'Hello' with an image saying the same thing, for the reason(s) outlined above.

HTML code:<div id="hello">Hello</div>CSS code:div#hello{height: 10px; width: 30px; background: url('hello.png') top left no-repeat; font-size: 0;}

(example is simple just to get the point across)Wouldn't this give an image in the div, while the text is not displayed because its font size is zero?Does this not accomplish the same thing, and wouldn't screen readers still be able to pick up the word 'Hello'?Or have I missed some critical view of this topic?Thoughts and opinions please.

[dsonesuk]

but if you put it within say <span>Hello</span>, so you have <div id="hello"><span>Hello</span></div>and use z-index.div#hello{height: 10px; width: 30px; background: url('hello.png') top left no-repeat;}#hello span {position: relative; z-index:-1;}it should be positioned behind the background image

Edited August 19, 2009 by dsonesuk

[danm68]

Thanks for the reply.Not sure if you you got what I meant, although looking back I'm not very clear. So basically using either of those methods would achieve the desired effect while screen readers could still 'read' the word "Hello"?Thanks again

[Ingolme]

You can just put an image in the background and force the text out of view with text-indent:

<h2 class="section">Section title</h2>

h2.section {  background: url('file.png') top left no-repeat;  width: 140px;  height: 50px;  overflow: hidden;  white-space: nowrap;  text-indent: 140px;}

[danm68]

Yeah, that would work too and I'm sure there's many different ways of accomplishing the same thing.But does anyone know if screen readers would still be able to read the word in all of those examples?Well really I'm only wondering about 'font-size:0;' because with the other two the text is still there, its just behind something or moved out of view.Thanks for the other examples as well.

[dsonesuk]

one more, with just one extra declaration:#hello { background:url(1cha_imgash_thumb.gif) no-repeat; height: 75px; width: 100px; text-indent:-9999em;}<div id="hello">Hello</div>