The web is becoming more and more dependent on Javascript. This has been troubling me a bit since I’ve always held the view that all content should be available and usable (though perhaps in a different state) when Javascript is turned off.
Internet Explorer
In Internet Explorer (up to version 9), the only way to use the new structural elements in HTML5 is to use Javascript to insert the elements into the DOM. Then IE will allow you to style them. If you don’t do this, IE will style the elements it understands (the HTML4 elements), but leave the ones it doesn’t unstyled (the new HTML5 elements)—and that can be worse than no style at all.
As I was writing a new talk on HTML5 recently, I struggled to find current information related to how many users view the web without Javascript enabled. The numbers ranged from 5%-8% (and I couldn’t be sure how accurate they were). When giving my talk at Web Directions US, Nicholas Zakas who was also speaking, informed me that Yahoo! has found Javascript turned off in 1% of users on their home page. He’s currently writing a blog post documenting/explaining this information and I’ll link to it when completed.
HTML5 and Accessibilty
I also wanted to be sure that there was no accessibility penalty when Javascript was turned off. To me, this is even more important since many that surf without Javascript (geeks) can enable it if it’s needed. But if the lack of Javascript harms the usability for screenreaders or other disabled users, that’s clearly problematic. Derek Featherstone pointed me to an excellent bit of testing done by Jason Kiss which showed that even though screenreaders may not totally understand the HTML5 elements, they still read the content. There are a few issues—you should read the article for more information—but it’s not related to Javascript, so we’re safe there.
When Javascript is Turned Off
The conclusion I’ve personally arrived at is this. I’m going to use Javascript to enable the new HTML5 elements in Internet Explorer. But I’m going to take it one step further. I’m going to notify those using IE that they need to enable JS to properly view the page. Instead of using the <noscript> element, I’m using Modernizr. I realize that <noscript> may seem more semantically correct, but there are situations where it may not be best served as such (serving your document as XML is one of them). It also doesn’t give you the same styling abilities without special care.
With Modernizr, I place a class called .no-js on my html element:
<html class=”no-js”>
Modernizr not only adds the IE support for the HTML5 elements, but it tests for many other supported and unsupported HTML5/CSS3 features and gives you feedback in the form of classes. That’s not the important thing here—what’s important is that Modernizr changes the no-js class to js. Thus, if my html element has the js class (along with a myriad of other classes), I know that Javascript is enabled. If the html element retains the no-js class, I know that Javascript is disabled and I can then serve the note I’ve written to let the user know to enable Javascript to properly view the page.
I create a paragraph with a class of “noscript” and put the information within:
<p class=”noscript”>Please enable Javascript to properly view this page.</p>
(Or any other pithy comment you’d like to make.)
In my CSS, I then set that paragraph to display:none if Javascript is enabled. This makes sure that only those with Javascript disabled will see my comment:
.js .noscript { display: none; }
In this case, I don’t actually see a reason to set the .no-js .noscript paragraph to display:block. If that class exists on a paragraph, it’s going to be set to display:block by default. If the html element never displays the class of .js, there’s nothing to override anyway.
Paul Irish has added this to the HTML5 Boilerplate as well.
Happy coding!
{ 1 comment… read it below or add one }
is not just about making existing markup shorter (although it does a fair amount of that). It also defines new semantic elements.