Forum Moderators: not2easy
I was using Image Replacement on a site and berating myself for the use of a transparent gif, but having read about the accessibility issues with using spans and display:none; and text not being available if only images were turned off.. I had gone for the single pixle gif method instead so ALT text was available.
Then when I read the pros and cons of all the other IR methods I sat down and modified what I was using slightly to see if it could realistically become an accessible alternative..
The requirements I was working on were to make sure there was text in the heading in both the "CSS off" AND "Images Off" scenario. I also realised that putting this technique in place in the HTML didn't mean you would have to use it, it would just be there if you wanted to in the future. The CSS visbility properties can be adjusted/swapped if you want to just use Text Headings..
Here's what I have just now using a 300px wide x 100px high "Hello World" gif.
h1 {
position: relative; /* to allow absolute positioning of image */
width: 300px; /* image width */
height: 100px; /* image height */
overflow: hidden; /* just in case */
visibility: hidden; /* hide the text only but keep the dimensions ~ this also allows the use of transparent background images */
}h1 img {
display: block;
position: absolute; /* to cover text */
top: 0;
left: 0;
z-index: 500;
width: 100%; /* taken from the h1 dimension */
height: 100%; /* taken from the h1 dimension */
background: url(hello.gif) no-repeat 0% 0%;
border: 0; /* might be required if this is a link */
visibility: visible; /* bring it back to front */
}</style>
</head>
<body>
<h1><img src="s.gif" title="Hello World" alt="image: Hello World" />Hello World</h1>
s.gif is a single pixel transparent gif, the title on it gives the Tooltip. I put "image" before the alt text because when both CSS and images are turned off the alt text and the header text will be displayed, so this is to indicate that one is an image for the screen readers, text browsers etc.
It uses extraneous markup, which is why I was berating myself in the first place, but even if it's hard-coded in the HTML it doesn't have to be used.. and there's the negligible benefit of ALT text for the SE's?
is it viable? Any Opinions, pros, cons etc..?
Suzy
background: no-repeat 0% 0%; /*just eliminated the bgimage here*/and then make declarations like:
h1.Hello_World img{background-image: url(Hello_World.gif);}
h1.This_is_another_h1 img{background-image: url(This_is_another_h1.gif);}HTML is then:
<h1 class="Hello_World"><img src="s.gif" title="Hello World" alt="image: Hello World" />Hello World</h1> and more text and more text
<h1 class="This_is_another_h1"><img src="s.gif" title="This is another h1" alt="image: This is another h1" />This is another h1</h1>and some more textbig problem though: technique as it stands doesn't appear to work in Konqueror, so probably won't work in Safari either. I'll see if fiddling gets me anywhere.
visibility really needed, like for ie, maybe? since this seems to work real nice without it.
Explicitly setting margin desireable since in konqueror it offsets the images by a great deal.
Setting margin to 0 not necessary if you do this by default for everything; set margins as you want 'em on a selector-per-selector basis (you can set them to something besides 0 here too).
Very nice idea, SuzyUK.
