About

My name is Rob Cherny and I'm a professional Web Developer with 16 years of experience creating Web sites and Web-based applications. This site is where I write about my work, and random other things...

Learn More

Close Tab

Web Development

Ajax and Accessibility: You're Doing it Wrong (Hijax)

There’s talk of not using Ajax because of the accessibility concerns. I think that’s totally valid, if you’re going to rely on Ajax alone. But that’s not really the best or right way to do things.

It’s rare, except in some situations, where you should rely on a scripting solution exclusively, because scripting does have serious accessibility concerns. JavaScript can fail for a variety of reasons, and unless you’ve got a captive audience or real reasons you can avoid being worried about the accessibility of your app, you shouldn’t rely on Ajax or JavaScript alone.

Thinking about Ajax, and reading others’ posts on the matter, there’s a school of thought that adheres to “Progressive Enhancement” with unobtrusive scripting. I think they’re right:

build your application in the standard ways first
then, overlay Ajax with unobtrusive scripting, your Ajax “Hijax” the functionality
return a subset of what you normally would in your standard transaction

I can’t claim responsibility for the term “Hijax”, that credit without a doubt goes to Jeremy Keith.

Build a standard application

Consider a real, standard form application. And it’s interesting to note that a standard form submission really isn’t always the best place for Ajax (always ask yourself “why am I going to use Ajax?”).

User enters data, then submits. The screen refreshes and a response is generated on the server, but the response contains the whole regeneration of the page, including navigation, any calculated data or whatever processing etc.

Overlay your Ajax with Unobtrusive Scripting

Using modern scripting and DOM methods, you can interrupt the form submission onSubmit event or grab the submit button onClick handlers, and then “return false” on the form submission while sending the data up in the background using Ajax.

Finally, you’re going to want to send some data up that indicates it’s an Ajax submission as opposed to a regular submission, so potentially you can use the same server-side module to process the post, albeit in a slightly different manner.

Return a Subset of the Page

Now, your server-side app, having recognized the transaction as an Ajax transaction as opposed to a standard submission, will process the data and return just the data necessary to update the portion of the screen you’re wanting to update.

Now, you’re not worried about additional overhead of regenerating the page and the server has much less to do.

Benefits of Ajax-Hijax on Accessibility

You’ve got yourself a standard application which does the normal, accessible things. Then, when a client that supports it comes along, you’re overriding, or hijacking, the form with Ajax. Ajax becomes a means to enhance, or make better the user’s experience.

Conclusion

The server-side code you’ve normally used can be simply tweaked to support returning a subset of data. I’ve used this to great success several times. You’ll love it.

Remember, scripting and Ajax should “enhance” an application, unless you can get away with more for valid reasons. It’s just like JavaScript-based form validation: Unless you have a valid reason, you’re always going to want to use server-side validation as well, however the client can save you time and energy if it supports the features you’re after.

Possibly Related Articles

Jeremy Keith Oct 20, 02:33 PM #

Nice succinct explanation, Rob.

You say you’ve used this technique already: do have any URLs you can point to? That is, if NDAs and firewalls aren’t keeping the examples locked up.
rob Oct 21, 01:06 AM #

Jeremy, thanks so much for reading and posting. Unfortunately the best examples aren’t really available… at least not exactly as described (forms etc).

There are variations though: On cherny.com the “Learn More” tab linked at the top of most pages here is a regular URL to the About section, but enhanced by Ajax when you click it and the panel slides in with new content, giving a preview of sorts. (A note: I’ve not been too happy with this as the "Learn More" open/close tab states are in there by default and should be added dynamically)

On our current NavigationArts site, there’s various examples of accessible Ajax. It’s not forms and since it’s content again it could potentially be considered gratuitous, but makes an interesting study and it goes like this:

11/14/2006 Update: all of the following links are now broken due to the site being replaced... sorry folks!

Just about every page on the site is run out of a custom CMS we’ve built. Each page’s main content on the site can be served via Ajax or a standard request:

Sallie Mae Case Study Challenge

Or, via Ajax:

Sallie Mae Case study snippet

Then, each of the tabs on that page, which are pulled in using the Ajax method, have their own unique URL. You can click to get to Solution, but you can also browse to it:

Sallie Mae Case study solution

One final note, we’ve also added “state management” using bookmarkable hashes (which works in most browsers, but I think, Safari’s having some issues) so you can bookmark the current tab:

Example

We’d like to enhance that even more, but the idea is there.

A note, some of these links might not survive, we’re actually in the middle of redesigning our site already…

At any rate, you’re probably not going to be able to build the next Google Maps with something like this, but I guess you might get close.

Thanks for creating the term—I’ve been a little surprised it hasn’t caught on more, but hey, the technologies behind Ajax took years to catch on too.

shrug
rob Oct 22, 08:15 PM #

Hey, I’ve posted an updated article with a working example…
rob Nov 14, 11:25 AM #

Just wanted to mention: every one of those links is now broken. The site’s been replaced. Sigh. No Ajax on the current version.

Commenting is closed for this article.