<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?
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.
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.
<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.
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.
<div id="replaceText">
Some text goes here...
</div>
With this kind of CSS attached to it:
#replaceText {
text-indent: -9000px;
background: url(bg.gif);
.... }