Let your users know when Javascript is not enabled

I am redesigning my company's website, and have started using more and more AJAX. Because this relies on JavaScript, and because we cannot depend on our users to have JS enabled on their browsers, I wanted a quick and simple way to warn users when their experience was sub-optimal. This is what I did.

1. The message

First is the message that will be displayed if JS is not enabled. Put this where it will be most visible, such as the top of the page.

<div class="javascriptNotEnabled">
    Your browser does not appear to have JavasScript enabled. Please be advised that some 
    functionality may be missing as a result.
</div>

2. The script

Second, we need to test whether or not JS is enabled. This is done, not surprisingly, by trying to run a script. This simple one-liner adds an attribute to the page's html tag; because it is run after the page has been loaded into the browser, it will not interfere with standards validation even though the tag being added is non-standard.

document.documentElement.setAttribute('js-enabled', '1');

3. The style

Lastly, we add two pieces of code to the page's style. The first tells the browser how to render the message div. If JS is enabled -- that is to say, if the html tag has our attribute -- the second style uses an attribute selector to instruct the browser not to render it at all.

div.javascriptNotEnabled {
    border: solid 1px #CCCCCC;
    background-color:#EEEE99;
    padding:1em;
    margin:0 auto 1em auto;
}
html[js-enabled='1'] div.javascriptNotEnabled {
    display:none;
}

That is to say, the first style is always applied, but if the html tag has an attribute js-enabled, and the attribute has a value of '1', then do not display any divs with a class of javascriptNotEnabled. Thus, the message is hidden when JavaScript is enabled and visible only when it is not.

How can you test that everything meets expectations? Simply change the second style block to test for js-enabled='0'. Since the attribute will be set to '1', the test fails and the div will not be hidden. That will probably be easier than trying to set up a browser with JavaScript disabled.

For my needs, I have added the message at the top of the main master page, with the JS and CSS in the global .js and .css file used across the site. This ends up putting the message on pretty much every page: a not-so-subtle reminder to our users that they are seeing a crippled version of the site. We can do this because our site is available only to our field reps; if this were a public site, we might show this more sparingly, such as just on the home page or as a note in the page footer. Since this uses a class rather than an ID, I could also put the same or different warning in several locations.

So, there you are: a quick, light weight method to warn your users that they will not have an optimal experience on your web site. If you come up with any interesting uses for this trick, please share it in the comments.