Unobtrusive JavaScript

Dave Verwer
http://daveverwer.com
http://shinydevelopment.com

What is UJS?

Did it have full functionality? No
Was it as quick? No
Was it as pretty? No
Was it as usable? No
Did it basically work? Yes

Why should you care?

Accessibility

Mobile Browsing

SEO

As of 1st September 2005, every web site
built for a dutch government agency is
required by law to conform to:
Valid HTML 4.01 or XHTML 1.0
CSS and semantic HTML and separation of structure and presentation
Progressive enhancement
The W3C DOM (instead of the old Microsoft document.all)
Meaningful values of class and id
Meaningful alt attributes on all images
Scripts that work on links should extend the basic link functionality (think accessible popups)
If a link makes no sense without a script, it shouldn't be in the HTML (but be generated by JavaScript)
Use of forms or scripts as the only means of getting certain information is prohibited
Removing the focus rectangle on links is prohibited
Information offered in a closed format (think Word) should also be offered in an open format
The semantics of many HTML elements are explicitly defined

Point 3:
Progressive Enhancement.

Point 7:
Scripts that work on links
should extend the basic link
functionality.

Point 8:
If an element makes no
sense without a script, it
shouldn't be in the HTML.

Point 9:
Use of forms or scripts as
the only means of getting
certain information is
prohibited.

So JavaScript is evil,
right?

Good JavaScript

Bad JavaScript

The Dark Ages
of the Web

Separating content
from design

<b><font size=\"5\"><font color=\"#0000FF\">THIS
SITE IS UNDER CONSTRUCTION!!</font></font></b>
<style>
p.construction {
color: #00f;
font-size: 1.5em;
font-weight: bold;
}
</style>
<p class=\"construction\">
THIS SITE IS UNDER CONSTRUCTION!!
</p>

Separating content
from design
and behaviour

target=“_blank”
demo

Prototype & LowPro

<a class=“external”>

Event.addBehavior({
\"a.external:click\":
function(event) {
window.open(this.href, \"ext\");
return false;
}
});

Setting a class becomes an
indicator of behaviour not
just style

Make sure
nothing breaks

Start minimal and show UI
or
Start big and hide UI

JS Specific demo
UI

UJS plugin for demo
Rails

Summary

Does it really need it?

Do links still work?

Does this break the
back button?

Don’t rely on alert() for
confirmations

Scripts hidden away
when possible?

Enhancing Accessibility
with JavaScript?!?

Questions?
dave.verwer@shinydevelopment.com