Page 1 of 1
Accessibility Question reguarding images for headers
Posted: Mon Apr 24, 2006 11:56 am
by Luke
If set up a page like this:
Code: Select all
<div style="background: url(images/header_text.gif) no-repeat top left"></div>
Where header_text.gif is the header for my page, what would be a good way to include the text from that image so that text-only browsers, line-readers, etc. could find out what the header says?
Posted: Mon Apr 24, 2006 12:11 pm
by feyd
in a span that's display none or invisible maybe? I don't really know. But one thing's for sure, I wouldn't place the header text image like that. Just use a standard image tag and the alt attribute. That's what they're for.
Posted: Mon Apr 24, 2006 12:12 pm
by Luke
I'd like to, but in this case, I kind of need it to be the background image.
Posted: Mon Apr 24, 2006 12:55 pm
by Oren
I agree with what feyd said but not in all cases. My opinion is that you should do that like what feyd said as long as you can, but don't push yourself too much - if you have at least one good reason why the text should be part of the image then do it this way and don't make anything to have the text as pure text.
Now about how to do it: feyd also mentioned 2 possible ways to do it... I would go with the second idea - visibility: invisible;
I would go with the second since it had happened to me that the first way he mentioned simply didn't work.
Re: Accessibility Question reguarding images for headers
Posted: Mon Apr 24, 2006 10:21 pm
by Roja
The Ninja Space Goat wrote:If set up a page like this:
Code: Select all
<div style="background: url(images/header_text.gif) no-repeat top left"></div>
Where header_text.gif is the header for my page, what would be a good way to include the text from that image so that text-only browsers, line-readers, etc. could find out what the header says?
Text-only browsers do not generally 'render' background on div's.
Img tags are the correct solution, as they offer alt's. I'd look at it the opposite way, and ask why you can't use an img tag as the header.
Posted: Tue Apr 25, 2006 1:14 am
by matthijs
Or take a look at one of the other
image replacement tachniques. I often use the text-indent: -9999px technique from
Mike Rundle
Which technique is the best depends on your situation. What I do know is that using display:none; is not that good because (some or most) screenreaders will not read out the hidden text that way. While they do when the text is positioned off-screen by text-indent.
Code: Select all
<div id="replaceText">
Some text goes here...
</div>
With this kind of CSS attached to it:
#replaceText {
text-indent: -9000px;
background: url(bg.gif);
.... }