JavaScript: avoid overuse and enhance accessibility

I think that many web developers simply ignore the potential side effects of an overuse of JavaScript. Today's web browsers, starting from the revolutionary adoption of Nitro and V8 engines, have significantly improved their JavaScript performance. Consequently, the main concern about JavaScript entirely hinges on the misleading idea of performance optimization. But what about accessibility? I have to say that many web sites are a huge and bloated bunch of scripts (both external and embedded) injected into the page, with a few alternatives to JavaScript. Social buttons, modal dialogs, AJAX-based search, dynamic tabs and other similar techniques are considered a de facto standard for the creation of any new web project. In this article I'd like to outline some of the potential side effects of an overuse of JavaScript.

Looking through the eye of a screen reader

A screen reader reads a web page serially and sequentially, while a sighted user can jump from a section of the page to another with ease. Screen readers address this problem by providing a stunning set of keyboard shortcuts. For example, you can skip a block or navigate through a series of headings simply by pressing two keys together.

When you add a JavaScript interaction, you have to bear in mind that:

1. creating new content and inserting it into the DOM can be ignored by a screen reader (i.e. a screen reader doesn't update the page on the fly)
2. visual effects are for sighted users only (scrolling, fading, etc.)
3. if you interact with the user through a JavaScript-based GUI (e.g. tooltips, dialogs, etc.), you should always provide an alternative
4. links should point to effective content (always)
5. form processing should return some kind of output that can be handled by user-agents that don't support JavaScript or can't read AJAX content
6. navigation should work without JavaScript

Here's an example:

<li>
	<label for="email">E-mail</label>
	<input type="text" name="email" id="email" />
	<div class="validation">Please insert a valid e-mail address</div>
</li>

In this case we don't generate a new message with JavaScript but we use a server-side script to validate our form. However, we can always use JavaScript to add a fading effect to the box:

div.validation {
	opacity: 0; /* display and visibility suppress content in screen readers */
}

Then:

if($('div.validation').length) {

	setTimeout(function() {
	
		$('div.validation').fadeIn(1000);
	
	}, 2000);

});

In this way we can satisfy accessibility requirements and at the same time we can still use JavaScript.

In a nutshell: the point is not to get rid of JavaScript, but to use it wisely.