CSS Image replacement revised
Posted by Jorge Bernal February 02, 2006
I’ve found a really nice article about current and new techniques to replace some text (usually a title) with an image: Revised Image Replacement.
I was using the classic FIR method for this kind of job in my latest works, but the problem with this one is that some screen readers omit the text because of the display: none. Since this methods were mainly focused in making fancier headers without compromising accessibility, that doesn’t help much.
The new method also uses a span inside the h* tag, but instead of setting display to none, it sets width and height to 0, and hides the overflown text.
Sample code
Imagine your page starts with something like:
<h1 id="header"><span>Koke's</span></h1>
and the CSS is like:
#header {
width: 131px;
height: 98px;
background: transparent url(/files/fir-test.png) no-repeat;
}
#header span {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
will result in:
Loading ...
I’ve found a really nice article about current and new techniques to replace some text (usually a title) with an image: Revised Image Replacement.
I was using the classic FIR method for this kind of job in my latest works, but the problem with this one is that some screen readers omit the text because of the
display: none. Since this methods were mainly focused in making fancier headers without compromising accessibility, that doesn’t help much.The new method also uses a
spaninside theh*tag, but instead of settingdisplayto none, it sets width and height to 0, and hides the overflown text.Sample code
Imagine your page starts with something like:
and the CSS is like:
#header { width: 131px; height: 98px; background: transparent url(/files/fir-test.png) no-repeat; } #header span { display: block; width: 0; height: 0; overflow: hidden; }will result in:
Koke’s
You forgot the span element in your example. Left me confused until after I looked at the source…
Actually the span was (and is) there, but I missed to put an absolute url for the image.
I meant the line below the
Here’s what I use that avoids the screenreader problems of FIR and doesn’t require the <span> tag:
#header { width: 131px; height: 98px; background: transparent url(/files/fir-test.png) no-repeat; text-indent: -9999px; }The negative text indent ensures that the text isn’t visible on the page, but the screenreaders don’t ignore it.
Ok, you were right, thanks a lot!
Matt, that was a nice option too, but AFAIK doesn’t work on IE5
And, what’s the problem of using the alt option on img tag as usually?
The img tag should be used when the image is ‘content’. When it’s only decorative, it’s definition belongs to the realms of the style sheets.
This case is mostly focused on headers/titles, where the important part is the text itself, and the image is only to make this text beautier.
Thanks for the explanation Koke
But i still see some accesibility problems here. For example with someone that have visual problemas but resolves them by making fonts bigger. That wouldn’t affect the logo and he couln’t see the alternative text.
In the future SVG will be the solution, at least i hope so
That’s right but maybe you want to check the following article I found some time ago: http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm
I have to test is and post something about that, but looks nice.
A simple solution, em units instead of px. I like it
Thanks again koke!