Javascript Panic Buttons

— 2 minute read

So, at @media, one of the questions in the final panel was:

Can AJAX be made accessible?

The basic issue is that, as things currently stand, there's no easy way to let a assitive technology (screenreader or other) user know when the page has been changed via some cunning DOM Javascript shenanigans.

This causes a few problems when using the latest raft of web apps. You can't just say "well it works with JS turned off!" since modern screenreaders have it turned on. However if they've read past the point of change they won't know what's going on.

Various folks have done work on this already, James Edwards wrote an excellent summary of AJAX and Screenreaders at Sitepoint.

I'd been thinking about this too, since I do work in higher education, and we need our sites to be as accessible as possible. It would seem to rule out AJAX and its ilk...

However a simple solution occured to me, based on a turn off-and-onable dropdown menu I made a while ago. First off, build your web application using best practices like progressive enhancement so it sits on top of good old HTML that works(Jeremy Keith calls this HIJAX)...

Then create an option that allows the user to revert to the non-funkified version of your application if they encounter problems (when dicussing this with James at @media we called it the panic button). Store this choice in a cookie and then whenever the script loads and starts enhacing, branch off and leave the HTML as is.

Obviously this has one primary problem, it relies on the user. So you have to be careful where the option is in your page flow (so it's easy to find) and how it's phrased (which is tricky). Borrowing from software development we could use a preferences page, but if you phrase the option too negatively "turn off javascript enhancements" you'll probably get less usage then "turn on screenreader compatibility".

Any thoughts?