Adding an Image that's not Important for a Screen Reader to look into.

[etidd]

I'm putting in a gif in an <img> element, and I want to know what attribute would I use inside the element to tell the browser it's not important to read anything, or that it's not related page content.



guess: it is just

<img src="style/someimage.gif" alt="/">

[ralph.m]

Either do alt="" or, perhaps better still, serve the image as a background image via CSS.

[Stomme poes]

As ralph said, alt="" is even encouraged if you can't manage to stuff the decorational image into a CSS background.

With alt="/" you'd get people hearing "slash" or "forward slash" everywhere
Leaving the alt out entirely means the url is very likely to be read out (depends on the reader but the most popular ones do this as a desperate attempt to give the user something that might be useful).

[deathshadow60]

As mentioned, I suspect CSS is the answer -- if it's something a screen reader shouldnt' read out, it probably has no business in the HTML in the first place.

Though we're all guessing wildly here -- do you have an example page online we could look at to say for certain?

Remember, IMG is for CONTENT images, not for presentation (decorations). If it's content, the screen reader should be aware of it -- if it isn't, what's it doing in the HTML in the first place?

[etidd]

How would I do it as a CSS decorational image?

[deathshadow60]

Depends, what's it attached to? Again, we'd have to see what it is you are actually trying to do as there are dozens if not hundreds of different ways of handling an image or marking up content.

There are no "one size fits all" answers.

[etidd]

I would like to illustrate a metal bar between the menu drop downs at Atlanta Review Group™ using a .gif image or .jpg. I believe that if I can do that in CSS, I would like to learn how.

[deathshadow60]

"illustrate"? If you mean insert, I'd probably pad the bottom of an existing element and add it there... Though honestly your markup makes NO SENSE whatsoever... headings on non-heading elements, images for text with no content backing them up, non-breaking space in an element that shouldn't need one... Though I'm STARTING to understand what you are trying to do in the menu... I just wouldn't have MOST of that HTML in there as those aren't true "sections" warranting heading tags -- it's a cascading list.

I'll try to revisit this when I get up -- bedtime...

[etidd]

There is really no content on that site, lest the drop down menu and the goofy-sounding welcome statement that i've now changed 3 times. The drop down menu <a> tags have been changed to put an underline under the link on focus, active, and hover. Stomme Poes, a mentor, is the one that helped me with this drop down markup.

I just wanted to learn how to put an image behind this menu.

[etidd]

Pardon me... but I still didn't get an answer.

[ralph.m]

I just wanted to learn how to put an image behind this menu.

For that you would use a background image. There is another thread on this topic currently running:

http://www.sitepoint.com/forums/css-...es-770903.html

Is that similar to what you are doing?

[etidd]

Yes, I believe that's a relevant thread. It's just going to be there, and not anything on hover over.

[ralph.m]

Just place the bg image on the drop down ULs then:

ul {background: url(image.gif)}

etc.