Code Cleanout: Separate Content From Behavior

A keystone of good web design is separation of content from style, behavior and structure. The technology for accomplishing good design is a platform suported by four pillars: XHTML, CSS, JavaScript, and XSL stylesheets. We understand how to separate XHTML and CSS reasonably well, but not so separating JavaScript from content — until recently.

Separation of content from visual design and style was a quiet revolution in how we manage web resources. The contributions to content management and design practices; the savings in time, money, and system resources; the cure for what pains can't be overstated. So when I read discussions of applying the same principles to separation of content and behavior, visions of clear skies and calm seas dance across my eyes. Let me explain...

Dynamic behavior and sophisticated user interfaces is some of what Javascript brings to the web. It has also brought a lot of accessibility headaches, pointless eye candy and interesting debate. Now we can still have the debate, but without loss of accessibility (with care and skill, of course). How is this done?

By using the same principles of separation from content, move the embedded JavaScript to an external (.js) file, add a <script/> tag with an href attribute pointing to the external JavaScript file, and use the same hooks that CSS uses to add behavior. In addition to the hooks, you use the JavaScript binding of the DOM. Instead of using selectors (as you would to add style), you access the document hooks using JavaScript methods document.getElementById and document.getElementsByTagName.

The event triggers embedded in the HTML, and incidentally an important cause of inaccessible code, is removed from the content file and added at download time by the browser using DOM methods, e.g.:

    for( var i=0; i < links.length; i++ ){
        links[i].onclick = function(){ 
            return anotherFunction(this); 
        }; 
    } 

With care and technique, if the browser doesn't support JavaScript, then the static markup works in its place.

Christian Heilmann is an early pioneer of these techniques; techniques that were somehow given the obtuse name of "Unobtrusive JavaScript." To read more, and to get on board his Operation Cleanup campaign to remove JavaScript from content - especially, I pray, the cruft left by DreamWeaver (e.g., function MM_findObj(...), MM_openBrWindow(...), MM_validateForm(), etc., ad nauseum) - run to his web site.