3

I have recently put together a working navigation bar.

I'm pleased with it, but unfortunately it isn't accessible.

When images are OFF, I would like to show replacement text in its place.

Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?

Many thanks for any pointers.

Michael

steveax
  • 17,527
  • 6
  • 44
  • 59
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190
  • Why don't you use real img instead of background-image ? That way, you could benefit of the Alt properties (would display text if img are off). – Simon Arnold Sep 05 '11 at 19:36
  • 1
    I always presumed it was bad practice to use for the main navigation. I could be wrong. – michaelmcgurk Sep 05 '11 at 19:38
  • you are. why would it be? that's why it has alt and titles that can be read by visually impaired people, aso. – TigOldBitties Sep 05 '11 at 19:51
  • 6
    @TigOldBitties Hold up on calling mcgarriers "wrong". It's generally considered bad practice to use images for main navigation because it's not semantic. Images have nothing to do with website navigation, they should be links. – attack Sep 05 '11 at 20:01
  • Thanks, attack. "Semantic" was the word I was looking for :-) – michaelmcgurk Sep 05 '11 at 20:06

2 Answers2

5

You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:

<h3 id="header" title="Revised Image Replacement">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

The only limitation is this will not work for partially transparent images.

steveax
  • 17,527
  • 6
  • 44
  • 59
  • With a little bit of jiggery-pokery, that did the trick: http://pastebin.com/0JvcXr0S Many thanks for pointing me in the right direction, Steve :) – michaelmcgurk Sep 05 '11 at 20:20
2

If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:

<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />

Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.

You can use this pixel.gif image.

Hope this helps.

Nathan
  • 11,814
  • 11
  • 50
  • 93
  • 2
    Now this is a very interesting theory. Can you show me how I would use it in the context of my HTML? Thanks for your reply. I think we've cracked it :) – michaelmcgurk Sep 05 '11 at 20:08
  • @mcgarriers All you would have to do is add the `` code above inside each of your menu elements, and make sure to add that CSS to the menu elements, inline CSS or inside the rest of your CSS. I tried doing it in jsFiddle, but for some reason when I added your menu CSS it made everything hidden. I will keep trying and send you the URL to it when I'm done. – Nathan Sep 05 '11 at 20:20
  • 1
    Coolness, Nathan. I managed to get a working solution from steve's above. But if you've got time, it'd be cool to see where this goes. Thanks again sir. – michaelmcgurk Sep 05 '11 at 20:26