Accessible JavaScripting From The Ground Up

By Stephen Philbin

It's just a template I used to use myself so anyone using it may well want to change a few things, but the main point here is that the JavaScript is kept seperate in a file of its own (the CSS is kept seperate too, but that's another topic entirely). The aim is to try and keep the different aspects of your document seperate and to think of the overall document as a collection of components that can be implemented in various ways and have varying levels of importance to the document. It's by no means required that in order for your documents that use JavaScript to be accessible they must keep all their JavaScript in a seperate file, but it helps. It allows you to focus on each aspect of your document separately. You can start by building a straight HTML-only document that will form the base of the end product and then, once you are happy with the HTML, build on it by moving on to your JavaScript as a seperate aspect of the document; restructuring it with JavaScript and adding all your bells and whistles.

Keeping your JavaScript in a seperate file also makes things a bit easier in another extremely simplistic way. Obviously you can't always work on your HTML and then your JavaScript. Sometimes it's better to work on them concurrently. When you find yourself doing this then simply commenting out the <script> element can allow you to quickly check that everything works without JavaScript, without having to mess with the browsers you're testing in.

Using such basic methods and ideas as the ones I've touched on here can make a considerable difference to the accessibility of your documents. All it takes is a little forethought about how you're going to build your document. Instead of thinking of your document as one collective mass of HTML and JavaScript, try to think of your document as a collection of components: a content section, a menu, an advertisement, a decorative section and so on.

Think about the level of importance each component has and how it is made. If it's just a decorative bit of sparkle that uses JavaScript to do whatever it does, then it'll be quite safe, and probably best, to make the whole thing with JavaScript and just let it disappear without a trace when JavaScript is absent — rather than leave some half-baked mangled mess splattered on your page. If it's a menu, then it would be best to make an original menu entirely from HTML and a replacement entirely from JavaScript, then have JavaScript swap the HTML one for the JavaScript one.

There's actually plenty of allowances for variation on how you apply the principle. You might, for example, keep an original HTML menu but have JavaScript collapse it to a smaller size and only expand it on mouseover. It depends on what method might be best (or simply which you prefer). Regardless of how you do it though, the message is always the same; the original HTML markup is of primary importance and how your JavaScript works on your document is every bit as important as whether or not it even works at all!

Page 2 of 2

Previous Page
1 2

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date