You might to take a look at Thierry's solutions as well: http://tjkdesign.com/articles/tip.asp
http://tjkdesign.com/articles/a_perfect_Image_Replacement_technique.asp http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp E. Michael Brandt www.divaHTML.com divaPOP : standards-compliant popup windows divaGPS : you-are-here menu highlighting divaFAQ : FAQ pages with pizazz www.valleywebdesigns.com/vwd_Vdw.asp JustSo PictureWindow JustSo PhotoAlbum, et alia -- Rick Lecoat wrote: > On 18/10/07 (06:35) Leah said: > >> I'm in the situation of wanting to stay true CSS and accessibility standards >> by separating content and structure but am in a situation where I have an >> anchor (a:link) but want to replace the standard text based link with an >> image for those browsers/ that will see the image. > > Raphael said: > >> use the text-indent method; since display:none and even >> visibility:hidden cause troubles for screen-readers > > As I understand it, the most accessible way of performing image > replacement is the Gilder Levin method. It involves a little extra > markup but unlike most other methods it allows a normal viewer (as well > as screen readers) to read the text when images are off but CSS is on. > > Markup (in this case applied to an H1, but that's just an example) would be: > > <h1><span></span>Hello world</h1> > > Note the empty span. > > CSS: > > h1 { > width: [width of replacement image]; > height: [height of replacement image]; > position: relative; > } > > h1 span { > background: url(myImage.gif) no-repeat; > position: absolute; > width: 100%; > height: 100%; > } > > The technique does not move the text off to the side, nor make it > invisible, it simply plonks the image over top of it. So if images are > off, the text is revealed instead (whereas with a text-indent method, > images off/css on means that the text cannot be seen). > It also means that you need to use a solid image, not one with a > transparent background > > Like I said, it does introduce a non-semantic span but that's probably > better than using a less accessible method. > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
