#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    643
    Rep Power
    38

    Is javascript 508 compliant?


    Hi, I'm doing a government web site and the navigation uses javascript for dropdown menus. Is the Javascript 508 compliant, for the blind? Or do I have to create a static navigation at the bottom of the page, so that blind people can see all the links without having to implement the javascript dropdown menus?

    thanks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Good question, however, it's not that simple. It depends on how you implement it. For example, don't use "display:none" or "visibility:hidden" to hide the sub-menus; instead use "left:-9999px" and/or "top:-9999px".

    I recommend you do a search for "accessible dropdown menus".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    643
    Rep Power
    38

    Thanks Kravvitz


    Thanks for the info!!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by lelales
    Hi, I'm doing a government web site and the navigation uses javascript for dropdown menus. Is the Javascript 508 compliant, for the blind? Or do I have to create a static navigation at the bottom of the page, so that blind people can see all the links without having to implement the javascript dropdown menus
    I would like to answer you question so I read it multiple times but I still don't understand the question.

    First of all, W3C section 508 compliance is ONLY for HTML, it is not for Javascript. BUT no one follows 508 these days. Section 508 is a guideline that W3C made in late 90's. Nowadays web framework is too complicated for 508. Nobody uses section 508 these days.

    FYI, there is 508 compliance checker(I google'd it : http://achecker.ca/checker/index.php ) But just to prove my point, try to run thought google.com, amazon.com, or any well-known sites, almost 100% sites will fail the test. That's b/c 508 is no longer applice to modern day web sites.


    Originally Posted by lelales
    so that blind people can see all the links without having to implement the javascript dropdown menus?
    How do you make a blind people to see ???? I am a developer not God.


    Originally Posted by Kravvitz
    don't use "display:none" or "visibility:hidden" to hide the sub-menus; instead use "left:-9999px" and/or "top:-9999px".
    What are you trying to solve here? Is this for javascript disabled browser? If so, how is a answer? (btw, this is CSS not javascript - maybe it is not for javascript disabled browser)

    I am very confused about the question and the answer was given.

    Please someone correct me wrong or help me understand.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    643
    Rep Power
    38

    Hi jkdev


    OK, I didn't mean for the "blind to see the links" but to be able to hear them audibly, when there browser is set up to assist them.

    The client who needs the 508 compliance does government contracts, and by law, government sites have to be 508 compliant. I'm sure most sites on the internet aren't worried about this.

    I have made the page 508 compliant, but not the entire site, just this one page.

    Sorry for the confusion. I hope my explanation clears some things up for you.

    Thanks for the response.
    Last edited by lelales; October 23rd, 2013 at 03:00 PM. Reason: typo
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Section 508 is a US government thing and is intended for the web sites of government agencies. Perhaps you're confusing it with the Web Content Accessibility Guidelines (WCAG), versions 1 and 2, which were created by the W3C.

    Accessibility is not just an HTML thing; it applies to all of web pages, which includes CSS and JavaScript.

    I recommend you read these:
    The need for accessibility
    Why is web accessibility important to you?
    Introduction to Web Accessibility

    Originally Posted by jkdev
    How do you make a blind people to see ????
    Perhaps English is not your native/first language? At least in American English we often say "see" when we mean "hear" and vice versa.

    Originally Posted by jkdev
    What are you trying to solve here? Is this for javascript disabled browser? If so, how is a answer? (btw, this is CSS not javascript - maybe it is not for javascript disabled browser)
    No. The point is to hide the links from sighted people, but not from the screen reader applications that assist visually impaired people. Screen reader apps understand much of CSS2 and, depending on the specific software, will not read out text in elements that have "display:none" and/or "visibility:hidden".

    Originally Posted by jkdev
    But just to prove my point, try to run thought google.com, amazon.com, or any well-known sites, almost 100% sites will fail the test. That's b/c 508 is no longer applice to modern day web sites.
    People use the same argument against the need for writing valid HTML and CSS. Just because the biggest sites can get away without following some best practices does not invalidate best practices for web development. Since the biggest sites seem to be able to afford to ignore certain minorities, does that really mean your clients can too?
    Last edited by Kravvitz; October 23rd, 2013 at 03:36 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    22
    Rep Power
    0
    Thank you for the explanation. Your response is very clear and well structured. And I agree with you.

    I also agree that just b/c big well-known sites have bad coding, that doesn't mean it is right. I worked at Yahoo for 6 years, I have seen many bad code in many projects.

    Anyway, about your original post, unfortunately I have not had a chance to build a website for visually impaired people. However I have one suggestion you can try to solve your answer.

    you should try to destroy the DOM element when you don't need.

    in pure Javascript you can do
    Code:
    document.getElementById("ELEMENT_ID").removeChild(child);
    or in jQuery
    Code:
    $(el).remove();
    happy coding
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    You're welcome.
    you should try to destroy the DOM element when you don't need.
    What's the advantage of adding complexity like that? The point is to hide elements so that they can be made visible via user interaction.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    643
    Rep Power
    38

    OK, I need to post price sheets that are 508 compliant


    OK, I need to post PDF's of spread sheet for prices on products and this has to be 508 compliant. I read that a PDF can 508 compliant, and I am still researching. I assume I can just embed the the PDF into the web page.

    If anyone has any specific info or know how on this, please let me know.

    thanks!

  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    I don't know any specifics about making PDFs accessible. So in case no one else has any recommendations for that, I suggest you try a Google search.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Posts
    643
    Rep Power
    38

    thans Kravvitz


    We are going to develop pages that are 508 Compatible, instead of PDF's. I did do some research, and found the right solution.

    Thanks again

IMN logo majestic logo threadwatch logo seochat tools logo