Click to See Complete Forum and Search --> : Adding alt text to a css rollover image


Snot
04-20-2008, 07:17 PM
Is there any way to add alt tags to this? if so how?

<table align="center">
<tr>
<td><a href="index.html" class="home">Home</a></td>
<td><a href="forums/index.php" class="forum">Forum</a></td>
<td><a href="snotshop.html" class="snotshop">SnotShop</a></td>
<td><a href="contact.html" class="contact">Contact</a></td>
<td><a href="links.html" class="links">Links</a></td>
</tr></table>

Centauri
04-20-2008, 08:51 PM
"alt" is only text to be displayed in place of an image if the image is not available. If you are looking for a popup text description (which IE does with alt, but this is incorrect), then the "title" attribute is what you want :<td><a href="index.html" class="home" title="Back to the home page">Home</a></td>

Snot
04-20-2008, 11:43 PM
Alt is what I want but the images are in css so I don't know how to do it.

If you use a text only browser you cant hear any of my links because when the images are turned off and in the css nothing displays.

I can still click the links if i know where they are but there is know way to tell what link I am clicking. It only matters to blind users and I have no clue if I will have any but I don't want one to come along and never make it off my home page.

This text doest not need to display unless the images are disabled. You will see what I mean if you turn your images off and refresh my page.

www.drysnot.com

Any ideas?

Snot
04-21-2008, 12:17 AM
"alt" is only text to be displayed in place of an image if the image is not available. If you are looking for a popup text description (which IE does with alt, but this is incorrect), then the "title" attribute is what you want :<td><a href="index.html" class="home" title="Back to the home page">Home</a></td>


You know I think your advice is the best. a screen reader should pick that up regardless of weather or not someone can see it without doing a mouse over.

I'm going to go with it

Thanks for all your help

Centauri
04-21-2008, 12:57 AM
As there is actual text in the link, screen readers will read that text ok.<td><a href="index.html" class="home" title="Back to the home page">Home</a></td>
To get a true images-off-css-on compatible menu, you need to nest the images over top of thetext with another absolutely-positioned element, and it won't work if the images have transparent areas.

WebJoel
04-21-2008, 06:38 AM
I'm quite fond of this method: http://meyerweb.com/eric/css/edge/popups/demo.html

This uses a "span" inside of the "a" with "display:none;" (which *might* be not-so-good for indexing??). I wonder if if instead of "display:none;", it be positioned negatively off of the page (still works for SEARCH 'bots), and then, correctly re-positioned for the on-hover psuedo-state... hmm... I might have to try this..