[css-d] css for a:link image replacement
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. The Links are curently sitting in an unordered list as li like so - lia href=https://jr.slimink.com.au/#login; id=a_sloginSecure Login/a/li lia href=https://jr.slimink.com.au/signup; id=a_signupSign Up/a/li I have an images waiting to be used for each but am not quite sure how to go about it. Any help would be appreciated. Thanks Leah Maclean w: http://workingsolo.com.au e: [EMAIL PROTECTED] __ 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/
Re: [css-d] css for a:link image replacement
Leah Maclean wrote: 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. [...] If you want to achieve accessibility, don't replace the text. The short reason is that by doing so you will affect (at least) one group of users, the more vulnerable being those that have images disabled (for whatever reason). Now, if you can afford to bother them a little (like everyone else does, hence not being so little), then use the text-indent method; since display:none and even visibility:hidden cause troubles for screen-readers. Look for Joe Clark's opinion on FIR in 'a list apart'. __ 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/
Re: [css-d] css for a:link image replacement
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:
h1span/spanHello 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/
Re: [css-d] css for a:link image replacement
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:
h1span/spanHello 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/
