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

Seperating 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>

Seperating 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 UI
demo

UJS plugin for Rails
demo

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