Phil Hawksworth has produced a lovely example of unobtrusive javascript over at unobtrusify.com (though I might be biased due to my penchance for victoriana).

The only beef I have with Phil’s site is that it isn’t really unobtrusive. If the aim of unobtrusive javascript is to make your content accessible to all, then the behaviour layer javascript provides should be accessible to all those with javascript enabled. This includes those that prefer using keyboards to navigate (like myself) and those using assistive devices to navigate and interact with web sites. The javascript on Phil’s Unobtrusify site sadly is mouse dependent so the underlying content which the site is using to demonstrate unobtrusive javascript is, alas, inaccessible. The javascript is obtrusive.

Looking at Phil’s code – utlising the fabtacular jQuery it would be a piece of piss really easy to achieve the same effect for other (non-mouse) devices. My approach would be something like this (the following is untested – just throwing possibilities out into the ether):

$('#wrapper h1').addClass('clickable').wrapInner('<a></a>');
$('#wrapper h1.clickable a').click(function(){
	var el = $(this).next();
	if(el.is(':visible')){
		el.animate( {opacity:0}, 300 );
		el.slideUp(300);
	} else {
		el.slideDown(150);
		el.animate( {opacity:1}, 300 );				
	}
	return false;
});

Simple. All we’re doing is wrapping a hyperlink around the content of the h1 element and applying the effects to that and with that the code should work with a keyboard. The CSS will need restyling as the styling should ideally now be applied to the hyperlink element and not its h1 parent but that is another matter entirely (saying that I would argue that the background effect used at unobtrusify.com could equally be applied using plain ol’ simple CSS).

Anyway, not at all dissing Phil’s lovely site and the spirit behind it. Kudos amigo for your work in highlighting an important and oft neglected part of standards-based web design!