This content is a little crusty, having been with me through 3 separate
platform changes. Formatting may be rough, and I am slightly less
stupid today than when I wrote it.
19Apr 2010
Require site visitors to enable Javascript
This one has dogged me for quite some time, but I finally figured out how to force users to turn on Javascript when using sites with a lot of mission critical Javascript logic.
Let me first begin by acknowledging that, yes, requiring Javascript flies in the face of site accessibility. Policy wonks for this sort of thing will tell you that Javascript should never be a necessity, that a page should “degrade gracefully” when Javascript isn’t enabled. This mindset is complete crap, in my opinion. Every site has a minimum browser requirement, and Javascript is built into every modern browser. I fail to see why we are still separating the two, and can make a darn good case for expecting Javascript on the user’s end. But that argument’s for another day. If you agree with me, read on.
The example
This example assumes you understand HTML, CSS, and Javascript, and makes use of jQuery, so you may have to adapt it to fit your Javascript framework of choice.
This technique could be applied across the board to an entire site, but let’s start with a single page. A login or account registration is a great choice, since they are already gateway pages to your site. Start by adding the following CSS definition to your page or stylesheet:
.enable-javascript{
display:none
}
```
Next, open the HTML for your page and add the `enable-javascript` CSS class to the top level container containing the **body** of your page. You should try to leave the header and footer (and their accompanying navigation links) visible and accessible. For example, after my header DIV, the body of my pages are typically wrapped in something like this:
[...]
```
At this point, you're looking at a blank page. Now let's give our non-JS users something to look at. Place a `
code block **outside** and **above** the body that you just hid. You can use CSS and elaborate HTML inside a `