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.
--
Rick Lecoat
______________________________________________________________________
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/
