Jump to content

Replacing Text With Images


danm68
 Share

Recommended Posts

(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.

Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...