Accessibility Question reguarding images for headers

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Accessibility Question reguarding images for headers

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I'd like to, but in this case, I kind of need it to be the background image.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: Accessibility Question reguarding images for headers

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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);
.... }
Post Reply