Tuesday, June 24, 2008

An Event Apart: Principles of Unobtrusive JavaScript







It's not a technique - it's a philosophy for using JavaScript in its context: for usable accessible and standards-compliant pages.

1) Separation of structure, presentation and behavior.
2) Script doesn't assume anything

Separation:
-No inline event handlers for the same reason that you shouldn't use inline styles.

Advantages - ease of maintenance. The CSS files and the JavaScript layers can be edited simultaneously.

Reconnecting:
  • with id: document.getElementById(); (should always ask if its available first)
  • and class: getElementsByClassName(); - does not work in IE and only in the latest versions of all other browsers. If you want to use it by class, you also have to use a library function.
Assumption: JavaScript is always available
  • Primitive cell phones don't support it
  • Speech browsers support may be spotty
  • Company networks may filter out script tags
Assumption: Everyone uses a mouse
  • make dropdown menus keyboard accessible - focus paired with mouseover and blur paired with mouseout. supported by all browsers. 
  • click events also fire when the user activates an element by the keyboard.
Personal note: I have to wonder what percent of users don't use a mouse....i'm not saying don't design for them, but like half of this presentation has been spent on this concept. isn't it like designing for people who use completely deprecated browsers? the percentage is so small, we ignore it by course. This seems to be one of those things were web people are getting all excited about planning for every contingency while not really giving thought to practicality.

No comments: