Forum Moderators: not2easy
inside this div is a logo, imported form the css, as a background image.
But accessability requires this image (even though it is not in the xhtml) to have an alt tag.į
Or not?
I'd suggest that the company logo is part of the content of the site, and therefore should not be solely defined as a background image, especially as you should really have the logo as a link back to the home page for usability reasons.
Your best options would be to either:
. Have the logo as a foreground image defined as an IMG element in your XHTML.
. Stick with the logo in the background, but sit a transparent gif over the top of the logo to make it clickable and to assign alt information to.
. Use one of the various image replacement techniques to replicate the logo information as text.
It also may be that a title attribute on the containing element may be more applicable if you don't end up using a foreground image.
[edited by: jetboy_70 at 11:46 am (utc) on June 25, 2004]
make sure you are using an acessible image replacement technique as i belive FIR as been proven to be inaccessible for screen readers.
would it work if you made the header a link and gave the link a title?
intersting problem though isnīt it.
yes it validates as is. But accessability is part of my internal process for publishing sites. and a basic is all images must have an alt tag. but at the same time i wish to minimize the code, and that is done by placing the logo image as a background norepeat image in css.
at the same time i wish to minimize the code, and that is done by placing the logo image as a background norepeat image in css
Perhaps I am missing something but I don't see that it would make a huge amount of difference to the size of your code?
i am vaidating in xhtml 1.0 strict. i wish to export contetn to wireless in the short term. thats why the company logo is not neccesary in the html page.
The Accessibility guidelines outline alt tags being specified on content images, not background images. Anything with an <img src=> tag needs an alt. The same is not true of background images.
Providing an alt tag on a BODY background, for example, would do nothing except confuse a screen reader, because the image is merely decorative. It doesn't add any content to the page, nor does it make sense to give it an alt tag.
The same is true of the company logo.
Rather than using a background image for the company logo, and worrying about an alt tag, try using an image replacement technique.
Basically, this is where you have, say, an <h1> block and you replace it with an image.
The HTML:
<div id="yourdiv">
<h1>Company Logo</h1>
</div>
#yourdiv h1 {
/* move text off the page */
text-indent: -5000px;/* display image */
background-image: url('yourimage.gif');
background-repeat:no-repeat;
}
What that code does is move the H1 text out of the way, and puts the image in its place.
By the way, I'm moving the text out of the way instead of HIDING it using overflow:hidden because of this exact accessibility issue. Screen readers will see the H1 text instead of the image, and visual browsers will see the image instead of the text.
Using visibility:hidden; causes the screen reader to not see the H1 text at all.
in fact i am not that confused (i think! ).
the WAI double AA accessability list of rules require interpretation.
For example in this case, my logo as a background image striclt speaking validates and breaks no WAI points. BUT the spirit of these rules clearly indicate that all images should have there alt tag. Hiding the image in css just hides from the validator. The problem still exists.
A blind navegator to this site will have no alt tag image to identify the company name.
This is not a big deal, but i just found the problem i was having worthy of a post here.
thanks for the code you did there.
It seems an image replacement 'work-around' is more of a pain (and more code bloat on the css end) than just putting the logo in the source and alt-ing it...
I wouldn't call an image-replacement technique "code bloat." There's a reason they're used - so that you don't have to change the HTML in order to change the page structure and layout. That's the whole purpose of CSS isn't it?
I was answering from the assumption that the OP wanted the logo to be a background image. If using it as an inline image is an acceptable alternative, then fine.
However, I know that in my own work I sometimes run into cases where I want text on top of the logo.. in which case it's sometimes easier to just make the logo a background image (barring using layers to make one overlap the other).
so that you don't have to change the HTML in order to change the page structure
HTML is the page structure.
But accessability is part of my internal process for publishing sites. and a basic is all images must have an alt tag.
Please be nice to all the people with screen readers: use empty alt attributes for all non-content images. Imagine having to listen to all these non-content images:
"Welcome to Widgets Dot Com. spacer spacer border spacer spacer shaded background spacer spacer The home of Widgets!"
Never fill your alt attributes e.g. alt="spacer" on non-content images such as spacer gifs: use an empty alt="" instead. That way, the listener will hear this:
"Welcome to Widgets Dot Com. The home of Widgets!"
Much nicer, I'm sure you'll agree. You only need to put in alt text for an image which is actually conveying useful content of some kind, e.g. alt="Diagram: adjust the Widget balance by inserting the Sprocket into the square hole and turning clockwise."
