dominoGuru.com

Your Development & Design Resource

DHTML/AJAX Development - Considerations for disabled Javascript

03/08/2006 09:33 AM by Chris Toohey

I'm putting the finishing pieces on an article for AJAX and Domino, when one of my early-reviewers brought up an interesting point:

This rocks - but what happens if I have Javascript disabled?

I've heard the argument that "if [the user] disables Javascript, they are probably used to stuff not working!" - but this never settled well with me - to me, it means that my application is not complete, and I feel it's the responsibility of the developer/designer to take such lack-of-functionality into consideration.

An excellent example of this, is Google Maps. Access this AJAX-driven solution, and you'll understand how heavily it depends on Javscript. Disable the Javascript in your browser and try to access this site, and you are redirected here.

Now, before I even checked Google Maps, I had what I felt was a pretty slick solution to redirect a user to a "Sorry"-type page in your applications if Javascript is disabled... and it looks like Google Maps uses the same exact approach! Something to be said about great minds thinking alike!

The solution: <noscript> and <meta> tags.

I place the following in the HTML Head Content (inside the <head> tag for you web-heads out there that, like me, hand-write your own DHTML!):


<noscript>

<meta http-equiv="refresh" content="0;url=status.html">

</noscript>

The <noscript> tag, as per W3Schools.com is described below:

"The noscript element is used to define an alternate content (text) if a script is NOT executed.

This tag is used for browsers that recognizes the <script> tag, but does not support the script in it."

So what we're doing here is redirecting the user agent based on their ability to recognize the <script> tag, but failure to do anything about it (due to, for example, the user agents lack of functionality which you'll find in some WAP/Mobile browsers, or a very capable user agent with Javascript disabled).

As for the destination (read: now that I know you can't use my beautiful UI, where do I send you?!), this is where Google and I part company. Google Maps simply redirects to a page that tells the user that their browser is not currently supported - which IMHO will only confuse the user, as if they only disabled Javascript on their browser, they're likely to find their browser amongst the "Support Browsers" listing. No, I recommend a modification of another method I talked about a while back: An Attempt at Dynamic Content via Javascript

Using this method, you can have your application redirect to status.html with various "status codes", yielding various dynamic/context-sensitive messages to the user agent. Of course, this heavily utilizes Javascript, but you can display the following as the default content in your status.html:

We're sorry - In order to utilize this solution, you must have Javascript enabled on your browser!

If Javascript is disabled or otherwise not available, the innerHTML of the content container is not changed, and therefore this message is displayed to the user and becomes a reliable redirect/status/landing area for your web-based applications!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.