Gareth Lennox

Ajax-enabled user interfaces

There have been lots of people writing about ajax recently, and more importantly about ajax accessibility.

Keeping it simple, I want to focus on what happens when a user has javascript off, or the browser doesn’t support the XMLHttpRequest object. Now this may seem obvious, but your interface should work without javascript enabled. Maybe it won’t be as flashy, or user friendly, but it should work.

Our content management system (CMS) has a caching functionality to speed up the delivery of pages, and while it clears the cache when you change any content, there can be a time where you want to force a refresh. Below is the HTML for the clear cache link.

    <a onclick="ClearCache(); return false;" href="clearcache/">
        Clear page cache

Notice that if the user has javascript off, none of the `onclick` code will execute, and they will navigate to the `clearcache` page, which clears the cache and informs them so, after which they can navigate back to the previous page. If javascript is on though, the functions `ClearCache` is called, which does all the ajax calls back to the server, which clears the cache, returning a status value. If the status is not an error a messagebox is displayed informing the user that the cache has been cleared, without refreshing the page.

Note that there is a `return false;` after the function call, this effectively cancels the click on the link, stopping the browser from navigating to the clearcache page. An important thing to note is that while the user experience is different in the two cases, they are both perfectly usable. It will even work in a text-only browser, such as Lynx.

One way to ensure that there is always some kind of fallback method is to first get your interface working without ajax. Then you carefully insert the relevant javascript calls.

You could also go the gmail route, and have two totally separate interfaces, one for modern browsers that support ajax, and another plain HTML interface for older browsers, however this is a lot more work, to support (usually) a small minority of users.

Comments are closed.