www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 41

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

  1. #1
    Join Date
    Sep 2003
    Posts
    301

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

    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??

  2. #2
    Join Date
    Sep 2003
    Posts
    301
    no one has a thought on this topic?

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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.

  4. #4
    Join Date
    Sep 2003
    Posts
    301
    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?
    Last edited by etard; 03-30-2009 at 02:43 PM.

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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 <span> 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

  6. #6
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    I do basically the same thing, but I set the display to none rather than the font size to 0.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  7. #7
    Join Date
    Sep 2003
    Posts
    301
    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"><span class="xyz">Actual Text</span></a></li>
    </ul>
    Last edited by etard; 03-30-2009 at 03:22 PM.

  8. #8
    Join Date
    Sep 2003
    Posts
    301
    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"><span class="xyz">Actual Text</span></a></td>

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

  9. #9
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    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.

  10. #10
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by Charles View Post
    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.

  11. #11
    Join Date
    Sep 2003
    Posts
    301
    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

  12. #12
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by etard View Post
    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"><span class="xyz">Actual Text</span></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].

  13. #13
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by KDLA View Post
    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"><span class="xyz">Actual Text</span></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
    Last edited by etard; 03-30-2009 at 03:46 PM.

  14. #14
    Join Date
    Sep 2003
    Posts
    301
    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.

  15. #15
    Join Date
    Sep 2003
    Posts
    301
    Quote Originally Posted by KDLA View Post
    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 <span> 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&#37; 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.
    Last edited by etard; 03-30-2009 at 04:33 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles