Alt text for background images from CSS

greg's picture

He has: 1,574 posts

Joined: Nov 2005

I have a nav menu with images that have the nav text on the image itself (i.e. the text is part of the image).
Also, the images are actually called as a background in CSS.

CSS:

#main_nav li a.home {
background:url(../images/nav_home.jpg);
}

HTML:

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

Is there any way to provide a text for those images for Google and screen readers?
I know I have made it difficult by having the text on the images AND them in CSS but in this case I wanted a non-standard font.

The links are in the sitemap.xml, but I am thinking it's not good to have them in a sitemap but no actual link on the site found for them.
Regardless of that, I'd like a textual version of them in some way for SE's and accessibility.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

> 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 &nbsp; - I think that habit may be from an old issue with empty links in tables in IE3?

Megan's picture

She has: 11,367 posts

Joined: Jun 1999

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.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

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

Megan's picture

She has: 11,367 posts

Joined: Jun 1999

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?

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

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.

Megan's picture

She has: 11,367 posts

Joined: Jun 1999

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.

greg's picture

He has: 1,574 posts

Joined: Nov 2005

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.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.