dilemma: css or js navi, could use either, see pros/cons to both for my client

**etard** · 03-29-2009 06:48 PM

okay... here is the dilemma.

I have a client that has a top navi bar. The navi bar is made up of images that have a very specific font style text on them. So, using just html text (Arial, Verdana, etc) to trigger the background image is not an option here. period. don't bother asking or commenting, it is set in stone.

So, I could still do it in CSS and make the buttons backgrounds and just swap the background image, with its text on it. BUT, if I do this, I cannot have ALT tags or any html text in place if an issue or for search engines. Sure, I can cut out all the image preloading, ditch the scripts needed to run roll-overs, run the entire navi via CSS, I get a 5 button navi bar to run with just 5 images, and I use current CSS. Many benefits, but a key negative since no ALT tag or html text in this particular case.

Of course, I could also do this by good old js with the all those bulky additional image preload calls in the <body>, the scripts to run roll-overs, 10 buttons (an 'on' and 'off' state) for a 5 button navi, but I get to use ALT tags at least. But is that really reason enough to use it.

I feel like since the customer MUST have their font style used in the navi buttons, meaning the text and buttons are 1, I loose part of the benefit of a css navi.. that is, I could have HTML text in the page AND just 1 generic background image can be the on and off state - which is a real beauty of css navi, but not in this case. And, with css navi, I get no ALT tags in this case and since this navi must use buttons with their font style text on them, there is no text to see if an issue arises (since no ALT tag and no HTML text) or for search engines as the entire thing is image based. BUT, you also want to use more current technology like CSS, cut out the preloads, cut out the scripting to run roll-overs, use 5 images rather than 10..

do you see the dilemma?? not sure what best to do??

**etard** · 03-30-2009 01:31 PM

no one has a thought on this topic?

**KDLA** · 03-30-2009 01:36 PM

I use the images as background images, and then place a span around the actual text, setting its font-size to 0px. That way, screen readers (although I've done limited testing so far) and indexers will read the (text) code, and the images are still used for visual display.

**etard** · 03-30-2009 01:38 PM

so you take the CSS route....

but then try a trick with a span to place some text as you say "place a span around the actual text" - but you understand there is no text in the this navi.. no html... just rendered text on image buttons with images that say 'home', 'contact', 'about'.. so not sure I follow you?

**KDLA** · 03-30-2009 02:03 PM

Yes. I'm currently working on a website that must meet all three ADA priorities, but use the strict branding of the client. What I came up with was to apply the images as backgrounds to the <li><a>, but then within the <a> insert a that has the font-size set to 0px. The screen reader will still "view" it, but the sighted visitor will not see it. I do use javascript to render the dropdown (for IE6) only, however the javascript only changes the CSS; the code is already in the document.
(Reference: http://www.htmldog.com/articles/suckerfish/dropdowns/)

Code:

<ul>
<li><a href="file.htm"><span>Actual Text</span></a></li>
</ul>

Here's an example: link

**Charles** · 03-30-2009 02:10 PM

I do basically the same thing, but I set the display to none rather than the font size to 0.

**etard** · 03-30-2009 02:17 PM

hmm.. in my case, the prototype navi I did in CSS, I am using a table to hold the navi, but then I use css to run the entire roll-over aspects and set table attributes.. so I do not use the often seen <ul> list method.. so not sure I could apply this tactic you mention

and wouldn't yours more be like this actually, with an actual "class" assigned to your span as that seems missing? and you define your xyz class with font-size to 0px (or display to none in the case of Charles)

<ul>
<li><a href="file.htm">Actual Text</a></li>
</ul>

**etard** · 03-30-2009 02:27 PM

Actually...

Mine looks like this for example

<td class="hrollover"><a href="file.htm"></a></td>

"hrollover" then defines the size of cell, roll-over effect, etc.. could I also do what you do and add a class into it like this

<td class="hrollover"><a href="file.htm">Actual Text</a></td>

and then define my xyz class to be display none or tetx size 0 and essentially do exactly what you have done

**KDLA** · 03-30-2009 02:29 PM

A class isn't necessary. Since each <li> is unique (in width/height/background image), all I have to do is assign an ID to the li, then set the span associated with that ID.
li#firstone {.....}
li#firstone span {font-size: 0px;} or {display: none;}

I do that to prevent inheritance problems, and keep the code cleaner. It's just a preference; there are no strict rules as to how you work with ID's/classes.

**KDLA** · 03-30-2009 02:31 PM

Originally Posted by Charles

I do basically the same thing, but I set the display to none rather than the font size to 0.

I used to do that, too, until I downloaded NVDA and it wouldn't recognize anything with "display: none". WebAIM said that some screen readers actually heed display settings; anyway, that's why I use the font-size method. It may be just some quirk of NVDA.

**etard** · 03-30-2009 02:35 PM

so..

(1) would my option above in post #8 work then like yours and like an ALT tag
(2) has this really ever been browser and platform tested to work like an ALT tag and
(3) will search engines accept and work with it in any way like actual HTML text

**KDLA** · 03-30-2009 02:35 PM

Originally Posted by etard

Actually...

Mine looks like this for example

<td class="hrollover"><a href="file.htm"></a></td>

"hrollover" then defines the size of cell, roll-over effect, etc.. could I also do what you do and add a class into it like this

<td class="hrollover"><a href="file.htm">Actual Text</a></td>

and then define my xyz class to be display none or tetx size 0 and essentially do exactly what you have done

Yes, you could, [although you might do better using an <ul>, just because it is semantically correct].

**etard** · 03-30-2009 02:41 PM

Originally Posted by KDLA

I used to do that, too, until I downloaded NVDA and it wouldn't recognize anything with "display: none". WebAIM said that some screen readers actually heed display settings; anyway, that's why I use the font-size method. It may be just some quirk of NVDA.

<td class="hrollover"><a href="file.htm">Actual Text</a></td>

so, in setting my "xyz" style to {font-size: 0px;} I can still see the text "Actual Text" oddly laid right over the background image - tiny, but there nonetheless and with a hyperlink. I guess I assumed no text would be seen? yours is actually hidden while I still see it?

in setting it to {display: none;} like Charles the text is totally hidden sure enough as I would expect... but I still wonder, does it work like an ALT tag and will search engines use that text then also

**etard** · 03-30-2009 03:18 PM

I just did some VERY interesting research

Apple has a product that can do screen reading called Voice Over Uitlty

when turning it on and reading, navigating the js navi, all is perfect and it reads the the alt tags and navigates perfect

BUT, when I go to the css navi test of the page I find if I have the css style set to {display: none;} the reader does NOT see the hidden text and just lists links to my css sheet and not the hidden alt text. this tells me that hidden text, when set to "none" means nothing to the reader and then likely, nothing to search engines. so not likely is this a good setting.

BUT, when I change the css to be {font-size: 0px;} the reader works perfect and reads and navigates the ALT text and the correct links.. but the issue is, as I said above, you can see this supposed hidden (set to 0px) text laid right over the background image button, so that is no good. so this is a better setting except for the fact you can clearly see this tiny text hovering over your image, so how do I remove that is setting it to "0px" is not hiding it from view.

**etard** · 03-30-2009 03:30 PM

Originally Posted by KDLA

Yes. I'm currently working on a website that must meet all three ADA priorities, but use the strict branding of the client. What I came up with was to apply the images as backgrounds to the <li><a>, but then within the <a> insert a that has the font-size set to 0px. The screen reader will still "view" it, but the sighted visitor will not see it. I do use javascript to render the dropdown (for IE6) only, however the javascript only changes the CSS; the code is already in the document.

Code:

<ul>
<li><a href="file.htm"><span>Actual Text</span></a></li>
</ul>

Here's an example: link

I just know noticed in example your link that you also have the little text shown over all of your images? so your okay with this? I know my client will not be. no way. so I simply cannot do this and "hidden" does not seem to work either in that it does certainly hide the text, but also seems to make it of no useful value.

so, essentially, I am coming to the conclusion that people that are using CSS navi with 100% image based buttons just simply forgoing any ALT tag benefits, screen readers working, and possible search engine benfits? that is the way it seems - unless you are willing to have tiny text floating over your images

if you use CSS navi that utilizes HTML text to trigger the roll-over of a background image, you are golden & get the benefits of alt tags, working screen readers, search engine benefits.. but use a 100% image based CSS navi and you have unavailable issues that breaks all of these.

Thread: dilemma: css or js navi, could use either, see pros/cons to both for my client

Thread Tools

Display

dilemma: css or js navi, could use either, see pros/cons to both for my client

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions