CSS image replacement is

Megan — Sun, 03 May 2009 18:07:19 +0000

CSS image replacement is actually the standard way of solving this problem. It keeps a standard text link in the nav menu (better for search engines and screen readers) while displaying a special font to other browsers. Of course, now the ability to use special fonts in CSS is getting closer to becoming a reality so that would be something else to experiment with (as would be sIFR and similar techniques).

What you're proposing is still a hack, it's just not in CSS.

If you are trying to bait people you really need to stop it or I will do something about it.

Let's not debate again by

greg — Sun, 03 May 2009 16:14:53 +0000

Let's not debate again by hair splitting!

The truth of the matter is I DID indeed ask for an ALT text to background image, but reading my post provides enough information to understand what I am ACTUALLY trying to do.
That is offer some text to search engines and screen readers for links that don't have any.

Cheers for the suggestions.

Well, Megan, this is like

decibel.places — Sun, 03 May 2009 15:48:26 +0000

Well, Megan, this is like the discussion about <title> is not a META tag...

The OP asked how to add ALT text to a background image, which is not possible.

I proposed placing a transparent image in the same location in the doc with the ALT text. You suggested adding text to the link and positioning it offscreen.

In a semantic, structural way, I think my solution is closer to achieving the goal in the OP, by adding ALT text at that position in the document.

Although I think positioning the span text offscreen will work, I am wary of css "tricks" unless they are absolutely necessary.

decibel.places

Megan — Sun, 03 May 2009 15:37:36 +0000

decibel.places wrote:

however, your method adds an innerHTML text value to the link, rather than an alt value to the image

my method, with transparent images, adds an image with an alt value at the same position in the doc as the background image

So?

you're right Megan, some

decibel.places — Sun, 03 May 2009 15:34:35 +0000

you're right Megan, some screenreaders will not "read" an element with display:none and others ignore visibility:none and some ignore both.

if you want the page accessible, it is best to position the text off the page

however, your method adds an innerHTML text value to the link, rather than an alt value to the image

my method, with transparent images, adds an image with an alt value at the same position in the doc as the background image

You need to look into image

Megan — Sun, 03 May 2009 14:57:12 +0000

You need to look into image replacement techniques. One technique involves keeping the text in your navigation menu, something like this:

<ul id="main_nav">
  <li>
    <a href="/index.php" class="home"><span>Home</span></a>
  </li>
</ul>

Then positioning the span off the page:

#main_nav li span {
 position: absolute
 left: -3000px;
}

Display:none could also be used but sometimes screen readers pay attention to that so it's not as reliable.

Seach for CSS image replacement for other examples.

> If the image is

decibel.places — Sun, 03 May 2009 14:49:00 +0000

> If the image is presentational, it should be in the background with no alt
> if the image is content, it should be in img tags, and properly alt'ed.

what about adding a transparent image with and alt tag?

<ul id="main_nav">
  <li>
    <a href="/index.php" class="home"><img src="transparent.gif" alt="alt text"></a>
  </li>
</ul>

also, while it is possible to have an empty link, I prefer to put something in there, eg   - I think that habit may be from an old issue with empty links in tables in IE3?