Javascript and Accessibility Javascript and Accessibility jquery jquery

Javascript and Accessibility


If accessibility is your primary concern, always start a website using standards-compliant (pick a Document Type Definition and stick to it) HTML. If it's a web application (form submissions, etc), make sure the forms will work using just HTTP GET and POST. Once you have a complete website/application you can add bits of CSS and JavaScript as long as the site still functions, with either or both off.

The most important concept here is Progressive Enhancement. You're adding additional bells and whistles using CSS/JavaScript, but your web site/application will function perfectly well without either.

A great tool for testing 508, WAI, CSS off, JavaScript off try using the Web Developer plugin for Firefox.


I think the answer is really in how you architect things. JQuery has the capability to be unobtrusive and therefore accessible. The trick is to have redundancy around your AJAX calls so browsers without JavaScript can still utilize your service. In other words, wherever you have JavaScript responses, dialogs, etc you need to have a degraded equivalent.

If you have accessibility in mind and you're properly testing for both use cases (JavaScript vs. Non-JavaScript) you should be able to write applications that cater to both audiences.

Example ($(document).ready call omitted for clarity and brevity:

<script>  $("#hello").click(function(){    alert("Hi");  });</script><a href="/say_hello.htm" id="hello">Say Hello</a>

A trivial example but basically this will only evaluate the click JavaScript event if JavaScript is supported. Otherwise, it will perform like a normal link and go to say_hello.htm - your job as the developer is to make sure that both outcomes are handled for appropriately.

Hope that helps!


Progressive enhancement is certainly one route but unobtrusiveness is not the be all and end all of JavaScript accessibility as screen readers tend to use browsers as a basis for their work. Since those browsers support JavaScript, scripts on your page will still run. This is a particular problem with AJAX as clicking on one part of the page could change another part of the page that the screen reader isn't aware of.

As AJAX matures, however, methods of making it accessible are emerging. Look into the WAI-ARIA for modern methods of making AJAX accessible, and Google's AxsJAX for a good way of implementing it.