Alt text for background images from CSS
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 posted this at 14:49 — 3rd May 2009.
He has: 1,494 posts
Joined: Jun 2008
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?Megan posted this at 14:57 — 3rd May 2009.
She has: 11,421 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.
Megan
Connect with us on Facebook!
decibel.places posted this at 15:34 — 3rd May 2009.
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 posted this at 15:37 — 3rd May 2009.
She has: 11,421 posts
Joined: Jun 1999
my method, with transparent images, adds an image with an alt value at the same position in the doc as the background image
So?
Megan
Connect with us on Facebook!
decibel.places posted this at 15:48 — 3rd May 2009.
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 posted this at 18:07 — 3rd May 2009.
She has: 11,421 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.
Megan
Connect with us on Facebook!
greg posted this at 16:14 — 3rd May 2009.
He has: 1,581 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.