JavaScript: The Right Way

I have been dealing a lot with the best way to incorporate JavaScript into web sites recently. It’s clear to me that there are many designers who never try to use their site with JavaScript turned off. This is not to say that using JavaScript is bad or wrong, simply that, like a gun, in the wrong hands it can lead to most unfortunate outcomes.

If you plan to use JavaScript there are a few guidelines you should follow to minimize the casualties.

Make everything work well without JavaScript

If that means that you have to rethink your IA or redesign part of your interface so be it. But make absolutely, positively sure that users without JavaScript can still reach all of the content and that they are missing nonoe of the core functionality of the site.

If you can do it another way you should

Look at how you are using your JavaScript. Is it really the best way or just the first one you picked up? Is all of your form data validation client-side? Consider doing it server-side so it works for everyone. Do you really need to use JavaScript to open that link or can you use a URL in the href attribute so the link will work for everyone?

Test your site without JavaScript

Disable JavaScript in your browser. Now go to your home page and start to browse your site. Now look at your user tasks (which you have spent some time writing down and thinking about) and try to perform them. Can you still follow all of the links and submit all of the forms? Is there a menu that doesn’t work or a select box that won’t submit? It is very important to see where not having JavaScript will break your site. Now look for a way to change up your code so that it works for everyone.

But how can we fix it?

It depends on what the problem is. Many sites mess up simple things that will only take a few minutes to fix. If you’ve built a monument to DHTML then you may be beyond the scope of this entry.

  1. Don’t use a JavaScript with as the value of an href attribute. Certainly don’t use it to launch a pop-up window.
  2. Don’t use JavaScript to auto-submit a form or jump menu, let the user submit it with a button. Auto-submitting forms leaves users powerless.
  3. Don’t use JavaScript to create content unless a suitable alternative is available when it doesn’t work. (Look to the noscript tag on these occasions)
  4. Make it work without JavaScript and then use the script to make it work better. For example, if you use JavaScript to show/hide content make it visible by default and then use the JavaScript to hide select parts when the page loads. If content is hidden by default then without JavaScript there will be no way to unhide it.

A brighter tomorrow

By keeping in mind what happens to your users when they can’t use JavaScript and actually testing your site without it you can make leaps forward in the areas of usability and accessibility. Sometimes a few simple fixes can make an enormous difference to your users. The first step is recognizing that there is a problem with how the JavaScript is being used, from there it just takes a little creativity and elbow grease to get it right. Good luck and happy scripting.

Kevin Hall

I am one of the owners of Infinite Web Design. I'll be glad to talk with you about who we are, what we do, or any of the topics we write about here.
Kevin Hall