Is using jQuery 508 compliant?

Question

I am working on an asp.net website that needs to be section 508 compliant. I'm confused as if I'm supposed to use JavaScript or not at all.

Can I even use jQuery's slideUp()/slideDown() to show/hide sections? Can I use jQuery UI's datepicker and modal dialog boxes?

Answer 1

In short yes. In general the jQuery UI team is very aware of accessibility issues and uses ARIA (http://www.w3.org/WAI/intro/aria) on most if not all of their widgets.

That being said, however being 508 compliant and "accessible" are different things. There are various standards, with "508" compliance being the least strict you can be.

99% of pages these days use dynamic JavaScript enabled controls, with varying degrees of accessiblity. Most of the problems occur when people roll their own controls instead of use a good control library like jQuery UI.

The applicable rule is this:

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology

jQuery's dialog widget, for example, uses markup on the page for the dialog content, so it is accessible for assistive technology (AT). Whether the AT properly interprets the content is not necessarily your concern, at least in regard to being 508 compliant. This is because there are various types of AT in combination with various OS, browsers etc.

In the case of showing and hiding content, technically the hidden content is interpretable by AT once it is shown. The issue here is how the AT knows when the DOM changes. That depends on the AT. Here you can dynamically update ARIA states to inform the AT, but the AT won't necessarily respect and/or implement the ARIA standards.

Answer 2

A little late to the party but this link came up on google so thought i would add some thoughts. This subject has a lot to consider.

SSB Bart group did a great summary of the state of the jQuery Ui controls.

https://www.ssbbartgroup.com/blog/2013/07/03/jquery-ui-accessibility-analysis/

However, since that post I've seen changes being made for example to the tab control. When I do quick tests of any major sites like jQuery UI and even bootstrap/foundation which claim to be "fully accessible" i can usually find issues.

When testing for accessibility I usually use the following general methodology..

1. Run automated tests like http://wave.webaim.org/toolbar/ and http://squizlabs.github.io/HTML_CodeSniffer/
2. Test that everything is keyboard accessible and has a focus indicator
3. Actually run a screen reader like Jaws or Voice over comparing against a base line such as examples from http://whatsock.com/
4. test the controls use the generally accepted guidelines for keyboard usage: http://access.aol.com/dhtml-style-guide-working-group/

In doing so you can see where each jQuery Ui control fails and doesn't. Its not horrible they try but there are some holes in it and pretty much all of the major frameworks.

Concerning slide and and slide down that doesnt matter on itself. What matters is if the button you are using is keyboard accessible and you use the right aria tags such as aria-hidden ect.. See http://www.w3.org/TR/wai-aria/states_and_properties to indicate the hidden content.