homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

alt tag in a css
is this posible?

 11:26 am on Jun 25, 2004 (gmt 0)

i have a header div

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?



 11:45 am on Jun 25, 2004 (gmt 0)

You don't need an alt attribute on a background image to validate, but you've hit upon a bigger issue here.

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]


 11:45 am on Jun 25, 2004 (gmt 0)

no you can't and no it isn't necessary because it is a background image and those without images turned on or with vision impairments hsouls see the text contained in the header tag.

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?


 3:56 pm on Jun 25, 2004 (gmt 0)

You don't have to make it a link to give it a title. The title attribute exists for all elements.


 10:23 am on Jun 28, 2004 (gmt 0)

ok thanks for the input people,

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.


 10:30 am on Jun 28, 2004 (gmt 0)

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?


 3:57 pm on Jun 28, 2004 (gmt 0)

to be truthfull it makes very little differnece to code size. but it does make a difference.

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.


 7:48 pm on Jun 28, 2004 (gmt 0)

I think you're confusing yourself here.

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.


<div id="yourdiv">
<h1>Company Logo</h1>

The CSS:

#yourdiv h1 {
/* move text off the page */
text-indent: -5000px;

/* display image */
background-image: url('yourimage.gif');

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.


 4:34 pm on Jun 29, 2004 (gmt 0)

ok thanks for that ... but ...

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.


 5:02 pm on Jun 29, 2004 (gmt 0)

Why would you want your logo as a background image? It's not part of the style, it's a part of the content surely?


 7:43 pm on Jun 29, 2004 (gmt 0)

I frequently confuse myself, but not over this issue.

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...


 8:59 pm on Jun 29, 2004 (gmt 0)

It all depends on what you want the effect to be. I could certainly make an argument that a logo is NOT part of the content of a page - the.. well.. page content is. Text, tables, images that accompany text for descriptive purposes, etc.

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).


 10:50 pm on Jun 29, 2004 (gmt 0)

so that you don't have to change the HTML in order to change the page structure

HTML is the page structure.


 11:51 pm on Jun 29, 2004 (gmt 0)

I think you're missing my point...

Purple Martin

 12:25 am on Jun 30, 2004 (gmt 0)

But accessability is part of my internal process for publishing sites. and a basic is all images must have an alt tag.

Hooray! Someone who actually cares about accessibility!

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."

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved