Accessible forms and unobtrusive javascript

I usually try to separate backend logic from the user interface logic when creating new PHP applications. I am pro fat gui and usually have a lot of client side scripting going on. I mostly use AJAX or other remote scripting techniques to call actions defined in the PHP backend. In my latest PHP project, a timesheet application (because all the ones I find are crappy),  I went for a really accessible user interface. An interface where you don’t have to use the mouse for everything.

I don’t want any PHP mixed with my html. I don’t want javascript in there either which is why I like the unobtrusive way of adding javascript to my applications. So behaviour fits right into my world. Normally you scatter lots of onclick and other event handling attributes in the html like below.

<a href="#" onclick="myaction()">My action</a>

Instead I create rules with the help of behaviour that applies certain events to a specific element based on id or css class. This gives me really clean html and is good because I need to style links individually in CSS anyways.

<a href="#" id="myaction">My action</a>
var sheetRules = {
    '#myaction': function(el) {
        el.onclick = handleMyAction;
    }
Behaviour.register(sheetRules);

I also want to use access keys. I don’t want users to be forced using the mouse. So the html I want is below.

<a href="#" id="myaction" accesskey="m">My action</a>

Using the access key combination, ALT-m in case you’re using windows, is working great. It seems the browsers are intelligent enough to fire the onclick event instead of following the actual link. So it doesn’t ruin it for you even if you have a backup link in addition to the onlick handler in case the users have javascript turned off.

It is actually quite simple to create accessible applications that degrade gracefully.

Tagged with: ,
Posted in Javascript, Web

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>