The document discusses unobtrusive JavaScript and accessibility requirements for websites built for Dutch government agencies. It notes that JavaScript should progressively enhance functionality without preventing base functionality, scripts that affect links should extend rather than replace default link behavior, and elements shouldn't require scripts to be meaningful in HTML. It also discusses separating content, design, and behavior; adding behaviors via class attributes; ensuring nothing breaks; and enhancing accessibility with JavaScript.

1. Unobtrusive JavaScript

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

3. What is UJS?

4. 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

5. Why should you care?

6. Accessibility

7. Mobile Browsing

8. SEO

9. 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

10. Point 3:
Progressive Enhancement.

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

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

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

14. So JavaScript is evil,
right?

15. Good JavaScript

17. Bad JavaScript

19. The Dark Ages
of the Web

22. Separating content
from design

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

24. Separating content
from design
and behaviour

25. target=“_blank”
demo

26. Prototype & LowPro

27. <a class=“external”>

28. Event.addBehavior({
quot;a.external:clickquot;:
function(event) {
window.open(this.href, quot;extquot;);
return false;
}
});

29. Setting a class becomes an
indicator of behaviour not
just style

30. Make sure
nothing breaks

31. Start minimal and show UI
or
Start big and hide UI

32. JS Specific demo
UI

33. UJS plugin for demo
Rails

34. Summary

35. Does it really need it?

36. Do links still work?

37. Does this break the
back button?

38. Don’t rely on alert() for
confirmations

39. Scripts hidden away
when possible?

40. Enhancing Accessibility
with JavaScript?!?

41. Questions?
dave.verwer@shinydevelopment.com