So what can you do if the users browser does not have JavaScript enabled ?
Even in todays day and age, there are still a small minority of Joe Average users that either don't have JavaScript enabled through bad set-up or overzealous security settings. Even for an intranet you might like to be able to help out the poor employee that 'some how' has managed to turn off JavaScript and give them a message that all is not well with the page that they are using.
If you are using JavaScript or an Ajax toolkit for use in building forms that collect data, and rely on scripting to perform validation, then having JS disabled can be a problem.
Like most things there are various schools of thought and regardless of whether you choose progressive enhancement or graceful degradation, you should at least have an alternative to solely relying on JS being available.
I decided that a simple graceful degradation was the most appropriate option for me. That is, if JS is disabled then show an error message and disabled the Ajax form. The solution is so simple that I wasn't sure if it would be worth a post - but hey what the heck!
The idea is to hide all the forms and buttons using css, then if JS is disabled use the <noscript> tag to display a suitable message. If JS is available, then use the Dojo goodness to replace the style of the form objects.
In Domino, I added a subform to contain the contents between the noscript tag.
<noscript><img src="design/bb70/$file/error.jpg"/>
<h1>Error : JavaScript is not enabled</h1>
<p ><strong>Message:</strong>Your browser does not have JavaScript enabled and is required for this website to function correctly.</p>
<p ><strong>Action:</strong>You can do one of the following;</p>
<ul>
<li>Enable JavaScript for this website in your browser</li>
<li>Contact your IT support department or supplier to get JavaScript enabled in your browser</li>
</ul>
<p >You will need to refresh this page once JavaScript is enabled.</p>
</noscript>
In the sylesheet add in a new class.
.noscript {
display:none;
}
In the HTML node that contains the form, update (or add) the class to be "noscript", which hides the form so that it can't be submitted. Do the same for other nodes that rely on JS.
In the onload() event of the form, add the code to change the hidden forms, to be visible using the dojo.removeClass and dojo.addClass.
dojo.removeClass("caseForm","noscript");
dojo.addClass("caseForm","case-form");
dojo.removeClass("dojopopups","noscript");
You can take the noscript idea further and provide an alternative non JS form to submit, rather than an error message. You could also use server side validation as the definitive way ensure the forms submitted have been completed correctly.
Even if you don't expect JS to be disabled, implementing a system like the one described is simple and quick enough, that its not much extra effort and might just save you a headache or two.
I was in a design accessibility class last week. In it the instructor asserted that if the purpose of a page can't be met without JavaScript turned on, then it's not accessible!
ReplyDeleteSo I can see from your post a clue as to how to implement this, but I'm wondering. Do you make all your web apps workable without Javascript?
The short answer is no. The form contained about 30 fields, of which only around half would need to be answered (hence the JS), so developing a form without JS would take a fair about of time. Also this would only effect a very low number of users, like 2 out of about 300 - so not really necessary. If the form was simple or I expected a large number of users that needed this then it would probably be a higher priority. I'm a pragmatist, aiming for accessibility is a good ideal, but for this case it was more important to let the user know that there is something wrong and to call us - so that we can resolve. Your situation, priorities and requirements might be different and so you might be able to have accessibility has a more important priority.
ReplyDelete