Show/hide solution
This solution arose over a lunch at Jack in the Box with my former coworker, Cody Lindley. We pondered if it would be possible, and I decided to find out. The following has nothing to do with Ajax, so don't bookmark it as such.
The Problem
With the increase in standards compliant JavaScript support in the past few years, there have of course been more and more effects libraries springing up. This has led to people using hide / show methods with confidence that they will work on a variety of operating systems and browsers. One of the most common effects I see is content appearing, seemingly out of nowhere, when a link or button is clicked.
While this is all well and good, something that is often overlooked is what happens (or doesn't happen) when JavaScript is either disabled or for whatever reason unavailable. This is typically caused by content being presented within the HTML, but hidden with CSS, which is subsequently over-written by JS, causing the content to magically appear.
An alternate method is having the content load as visible in the HTML by default, but then adding a CSS style with JavaScript as the page loads in order to hide it. Often times, this creates a momentary point of confusion on screen, as the DOM tree is created, and then hides the specified nodes. Because of this unsightly bugginess, some people tend to err on the side of visual consistency rather than accessibility.
Possible Solution
Well, I got to thinking: Why not hide things with CSS by default, but then provide a contingency plan with noscript for those situations in which JavaScript is not available? That way, there is no funky screen flickering as the page loads. Plus, in situations where the client is not surfing with JS on, the content just starts out visible by default, and we hide the hide / show controls altogether. After reading this article on Maratz.com, I had an idea.
In his example, he uses noscript to provide a header when Flash and/or JavaScript were not present. I have taken that a step further, and put noscript directly in the head of the document to be able to specify alternate, over-riding CSS styles when JavaScript is not available. Arguably, this is breaking with convention because the W3C validator throws an error.
However, after reading the spec, I could not find where it specifically said not to use noscript in the head. It stands to reason that if script is allowable, then noscript should be too. Using that basic logic, and adhering to the principle set forth in the Noscript Spec, I think this is a viable solution…
The NOSCRIPT element allows authors to provide alternate content when a script is not executed. The content of a NOSCRIPT element should only be rendered by a script-aware user agent in the following cases: The user agent is configured not to evaluate scripts. The user agent doesn't support a scripting language invoked by a SCRIPT element earlier in the document. User agents that do not support client-side scripts must render this element's contents.
According to that definition, the way I'm proposing noscript be used is perfectly legitimate. Despite that, the validator has a little problem with it. However, given recent dissention with the W3C process and validator, voiced by Zeldman and Hoehrmann, I think that perhaps we should err on the side of usability and accessibilty as opposed to some automated checklist.
In fact, there was an entire panel at SXSW, entitled Standard Deviation, devoted to discussing situations in which not using web standards are actually in the best interest of the end-user. I think that this could possibly be one of those instances, but I am really not sure.
This has been tested in the latest builds of Firefox, Internet Explorer, Opera and Safari. I also tested it with Fangs, the screen-reader simulator extension for Firefox, and it works just fine - giving two different sets of content based on JavaScript being either on or off. As an aside, I found it very weird that Fangs puts "dash Internet Explorer" in its reading of the browser's title bar.
The Example
So, all that being said, here is the example: Show / Hide + Noscript. Do with it what you will, depending on if you think the validation issue really matters. Also, I'd be curious to hear what you guys / gals have to say about the issue at hand. Is this an acceptable use of the noscript element?