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

@etardMar 29.2009

okay… here is the dilemma.

I have a client that has a top navi bar. The navi bar is made up of images ~~[U]~~that have a very specific font style text on them[/U]. So, using just html text (Arial, Verdana, etc) to trigger the background image is ~~[B]~~not[/B] 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??

to post a comment

CSS

40 Comments(s) _↴

@etardauthorMar 30.2009 — #no one has a thought on this topic?

@KDLAMar 30.2009 — #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.

@etardauthorMar 30.2009 — #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?

@KDLAMar 30.2009 — #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/)

<i>
 </i>&lt;ul&gt;
 &lt;li&gt;&lt;a href="file.htm"&gt;&lt;span&gt;Actual Text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

Here's an example: [url="http://apps.cpe.ky.gov/temp_docs/prototypes/kh2gky/index.shtm"]link[/url]

@CharlesMar 30.2009 — #I do basically the same thing, but I set the display to none rather than the font size to 0.

@etardauthorMar 30.2009 — #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>

@etardauthorMar 30.2009 — #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">[B]Actual Text[/B]</a></td>

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

@KDLAMar 30.2009 — #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.

@KDLAMar 30.2009 — #I do basically the same thing, but I set the display to none rather than the font size to 0.[/QUOTE]
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.

@etardauthorMar 30.2009 — #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

@KDLAMar 30.2009 — #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">[B]Actual Text[/B]</a></td>

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

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

@etardauthorMar 30.2009 — #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.[/QUOTE]

<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

@etardauthorMar 30.2009 — #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.

@etardauthorMar 30.2009 — #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.

<i>
 </i>&lt;ul&gt;
 &lt;li&gt;&lt;a href="file.htm"&gt;&lt;span&gt;Actual Text&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;

Here's an example: [url="http://apps.cpe.ky.gov/temp_docs/prototypes/kh2gky/index.shtm"]link[/url][/QUOTE]

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 [U]100% image based buttons[/U] 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.

@etardauthorApr 02.2009 — #so we agree on my conclusions?

Thus, I have opted to use .js based image navi in this case given the facts above.

@CharlesApr 02.2009 — #I think that you are misreading something above.

@etardauthorApr 02.2009 — #huh? what do you mean exactly as that is as vague as it gets despite my effort to give all my very specific details? please be specific as I did tests (post #14) that are hard to deny the results of and thus, came to natural conclusions.

@CharlesApr 02.2009 — #You're supposed to set display to none for just the visual media, screen and print. If you can make the JavaScript method work well enough that everybody can navigate the site then go for it, but the CSS method gives you way more flexibility--you can do more with HTML than with just the alt attribute--and a more light weight and maintainable product.

@etardauthorApr 02.2009 — #stil not following.. it seems to me, as I showed, a [B]100% image based image nav[/B] (that fact is critical) run only by css really creates usability issues which I think I clearly show.

of course js will work, it was the method loooong before css, but when you say "the CSS method gives you way more flexibility", [U]in this case[/U], I think not and I think my tests and example show that when you consider many factors: screen readers, accesability, search engines.

IF you have a nav bar that used a [U]text driven nav terms[/U] that[U] activate a background[/U] and it is run via CSS, I would agree with you and be all over it as screen readers, accesability, search engines would all be covered and usable as you have actual html text (anther critical factor here that an all image based navi does not have) in the nav bar running the roll over state. But this is just simply not the case in a nav that is imaged based only.

@etardauthorApr 03.2009 — #just another FYI.. I just did 1 further test with using a <title> tag in the <a href> in place of an ALT tag in the image tag (since we know we cannot apply an ALT tag to a background image) and in doing so, screen readers do not even acknowledge it. so, same out come as setting text over the background image to <display: none>. no screen readers and thus, no search engines reading the text contained in the <title> tag.

@CharlesApr 03.2009 — #Do something like

#navigation span {display:none}
 
 #nav-welcome a:link, #nav-welcome a:visited {
 background:url(/welcome.jpg) no-repeat bottom;
 }
 #nav-welcome a:hover, #nav-welcome a:active {
 background:url(/welcome.jpg) no-repeat top;
 }
 
 &lt;link href="/style-screen.2008-01-27.css" media="screen" rel="stylesheet" type="text/css"&gt;
 
 &lt;li id="nav-welcome"&gt;&lt;a href="/"&gt;&lt;span&gt;Welcome&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;

@etardauthorApr 03.2009 — #first, I cannot use your 'exact' example as in my design, I use 1 image that contains both off/on states and just shift the BG image up xx pixels on hover...

BUT from my quick test... no go as we are still back where we were as you are still setting navigation span {display:none} and thus the text between Welcome is not seen by screen readers (nor by search engines either then).

@aj_nscApr 03.2009 — #
the text between Welcome is not seen by screen readers (nor by search engines either then)
[/quote]

Really? I thought, (and could be completely wrong on this), that search engines used the content and the context - anything seen in lynx could be seen by a search engine?

@CharlesApr 03.2009 — #BUT from my quick test... no go as we are still back where we were as you are still setting navigation span {display:none} and thus the text between Welcome is not seen by screen readers (nor by search engines either then).[/QUOTE]You're still doing it wrong and you're still operating under a false assumption. Unless you are using a faulty one, your screen reader will not observe styles directed at the screen. And search engines don't pay attention to the styles at all.

@CharlesApr 03.2009 — #Really? I thought, (and could be completely wrong on this), that search engines used the content and the context - anything seen in lynx could be seen by a search engine?[/QUOTE]You are correct.

@etardauthorApr 03.2009 — #You're still doing it wrong and you're still operating under a false assumption. Unless you are using a faulty one, your screen reader will not observe styles directed at the screen. And search engines don't pay attention to the styles at all.[/QUOTE]

yes, my assumption on the part of the search engine comment may be wrong, but my understanding has been that if a screen reader cannot see it, neither will a search engine. both disregard the text yet both will see ALT text or HTML text on the page in say <li> format. so, when I said "(nor by search engines either then)" I may be wrong there.

But, as for the screen reader, do not know how mine is faulty when, as I have stated before, it clearly reads anything BUT those items set to {display:none}. set an item to {display:none} and that text/navi button is not readable. So:

1. use a js navi with ALT tags and it reads the ALT tags

2. use a text based CSS navi that uses html text to trigger a background like in the <li> method and it reads the text

3. use css for an all image based navi and set {font-size: 0px;} it reads the text ([U]but[/U] you get tiny text on your screen over your button image as side effect which is just a no go visually - see image below of "example2.jpg")

4. BUT use css for an all image based navi and set {display:none} and reader does not acknowledge the text terms or navi buttons *

so for examples for #1-3, if your navi had image buttons HOME, ABOUT, CONTACT, PRODUCTS and you use alt tags or html text to trigger the navi and the alt tags or text mimic these exact words, a screen reader would read to you "HOME, ABOUT, CONTACT, PRODUCTS". but for example #4, instead of it reading to you "HOME, ABOUT, CONTACT, PRODUCTS", the tests I have done 10 times is that it just reads to you a link to your css. So, for example, it would read "YOURCSS.CSS, YOURCSS.CSS, YOURCSS.CSS, YOURCSS.CSS" and not "HOME, ABOUT, CONTACT, PRODUCTS"

*see attached image "example.jpg" of what I mean and notice the nav button ABOUT US is highlighted and that is seen by the reader as "index-css2" and not seen as "ABOUTS US"

that seems pretty cut and dry evidence to me.

[upl-file uuid=65bbd2c9-792c-4739-9ea8-3463782a8d70 size=32kB]example.jpg[/upl-file]

[upl-file uuid=95ecbba2-4845-4f47-b1ad-e1656dbe59de size=4kB]example2.jpg[/upl-file]

@CharlesApr 03.2009 — #yeBut, as for the screen reader, do not know how mine is faulty when, as I have stated before, it clearly reads anything BUT those items set to {display:none}. set an item to {display:none} and that text/navi button is not readable.[/QUOTE]With CSS you can, and should, specify the styles according to the intended media, be they screen, print, or audio or such. You can have something hidden from the screen but shown in the print or whatever. If your screen reader is following the screen styles and not the audio then it is in error. More likely, though, you are specifying the style incorrectly.

@etardauthorApr 03.2009 — #understood.. but 2 things

1. For the navi css, I am using media="screen" in my tests, which is what I assume is correct and also what you showed in your example. so it seems I have that correctly covered?

2. "you are specifying the style incorrectly" - okay, so your convinced that if I have set the style incorrectly and that if it was correctly set the reader WOULD in fact read those text terms set to {display:none} of "HOME, ABOUT, CONTACT, PRODUCTS" rather than what it is doing now and saying/showing "YOURCSS.CSS, YOURCSS.CSS, YOURCSS.CSS, YOURCSS.CSS"?

@CharlesApr 03.2009 — #Please post a link.

And what screen reader are you using? There were some early ones that did just read what was on the screen but now they read the document itself.

@etardauthorApr 03.2009 — #I cannot post a link until it is public. sorry. BUT, as soon as it is, I can do so and will as I am curious. maybe I can hack togther something that uses the code but does not allow you to tell the company.

also, as I said early on, I use Apples Voice Over Utility

but hey... yo did not answer my 2 questions in #29 ?

@CharlesApr 03.2009 — #I can't answer those two unless I see an example of things misbehaving.

@etardauthorApr 03.2009 — #okay... but based on what you have been posting, it seems both could be answered irrespective of what you see?

on #1, you mention in your posts, and did in your example, about using correct media type for the css... I said I use, what you used, of "screen" - so not sure what seeing code what do?

on #2, you theorize either (a) a bad reader - but I would say Apple has a pretty proven reader and the reader behaves exactly as accordingly when doing several tests on several types of pages or (b) I have coded incorrectly, which yes I guess you would have to see the code to know that, but not whether to answer IF it was coded correctly as you envision it should be that the screen reader WOULD read as predicated and as it should versus how it reads those tags now. By not answering, it kind of tells me that you are not really 100% sure that even if I coded correctly, assuming what i did was wrong, it would even correctly read those text and not do what it is doing now despite the fact numerous test have shown, and was even eluded to early on by KDLA that {display:none} would not work, which I feel I also demonstrated and confirmed.

@CharlesApr 03.2009 — #A quick search with Google suggests that VoiceOver does impliment aural stylesheets but apparently it has a mode where it follows the DOM and one where it follows the screen layout. Make sure that you have the thing in DOM mode and it that doesn't work then it is most likely that you are specifying the medium incorrectly. Please post how you are doing so.

@etardauthorApr 03.2009 — #Yes, it is in DOM mode. I verified.

The medium for navi css is specified as:

[COLOR="Red"]<link href="navi.css" rel="stylesheet" type="text/css" media="screen">[/COLOR]

@CharlesApr 03.2009 — #That's how it's done so unless you are setting the display with inline styles there is something wrong with the reader.

@etardauthorApr 03.2009 — #I am not using inline styles.. okay, as per my working version and the suggestions here, there are many ways to skin this cat, but all seem to have same outcome. Here is a melded variation of yours and my versions which works perfect in that it test W3C and roll-over functions perfect cross browser. I have another version as well, both work as per what I said, but both have the screen reader issue either one I use. The About Us text is not even seen by the screen reader. So, rather than getting it to say ABOUT US it just says NAVI.CSS - with the culprit the being {display:none}

[B]Here is the navi button call in the page[/B]

<td id="hrollover"><a href="#">About Us</a></td>

[B]Here is the css too run it[/B]

#hrollover a {

display:block;

width: 58px;

height: 20px;

padding: 7px 0px 10px 0px;

background: url("../images/about.jpg") 0 0 no-repeat;

}

#hrollover a:hover {background-position: 0 -38px;}

#hrollover a:active {background-position: 0 -38px;}

#hrollover span {display:none}

@etardauthorApr 03.2009 — #see it now, some code added above as to how I have it working

@CharlesApr 03.2009 — #It's a problem with the screen reader. There is now way that should be telling you the file name of the CSS.

@etardauthorApr 03.2009 — #VERY interesting... well, you can see by my image on the previous pages post, telling me the name of the CSS [U]is exactly what it does[/U], and the photo proves it. Very odd how if you use anything other than {display:none} the screen reader says/shows exactly what it should, but use {display:none} and it disregards the text - like what KDLA said it would - and just points to your css containing the style.

so.. you would call this correct and good and use it in place of my js method?

@etardauthorApr 03.2009 — #Quick question, if I use the melded examples of both our ideas, I have used up the ID for id="hrollover" whereas I was going to use it for id="active" like this

<td class="hrollover" id="active"><a href="#">About Us</a></td>

so what do I do to activate the "on" state of the background so when you are on that page, the button is on? I had planned to use id="active" but cannot if I use id="hrollover"

not sure what to do?

Also in #CSS _↴

No scrollbar in Firefox div Validation of Site: Not accepting Flash [RESOLVED] Div overflow: problem with scrollbars in IE7

Success!

Help @etard spread the word by sharing this article on Twitter...

Tweet This

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

40 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

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

40 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

40 Comments(s) _↴

Also in #CSS _↴