The world of web design is abuzz with talk of jQuery, a snappy Javascript library that lets you, among other things, have sweet-ass animations. In between studying for finals and playing Counter-Strike, I’ve been reading up on how to use it.
Since I don’t “know” Javascript, jQuery is a godsend. It allows you to take advantage of Javascript’s DOM abilities without having to write tons of code. I’m learning Java in school, so jQuery functions are well within my level of understanding.
The Problem
One quibble I have with jQuery is that pages using it often aren’t as accessible as they could be. For example, if you go to Web Designer Wall’s demo page and turn off Javascript, the demos break. In some cases you only lose the flashy animation, but in examples where jQuery allows you to slide previously-hidden content divs into view, the demos become unusable.
This is because the sliding effect is implemented by styling the elements to be hidden with display: none, effectively removing them from the page. When the jQuery function is triggered (generally by a user’s click), the element is toggled to an active state and slid into view.
So when you turn Javascript off, you’re left with the CSS display: none hiding your content.
And so I set out to find a way to implement jQuery’s content-hiding animations while retaining accessibility. In particular, I attempted to create an accessible accordion-style menu, meaning that the menu defaults to showing all content sections when Javascript is disabled.
The Solution
Since the root of the problem is that the display: none in the stylesheet hides the content, all we’d have to do is remove this line of CSS, right?
Wrong! If you do this, then the accordion loads with every section open by default, with Javascript enabled. This isn’t ideal since we’re using the jQuery effect to only show one chunk of content at a time. So, ideally we want a way to only render the display: none when Javascript is enabled.
After a bit of research and a single line of code, I’ve got a fully functional, accessible sliding accordion menu. Within the jQuery API, there’s a set of functions for manipulating a page’s CSS. Using the css() function, I was able to add the display: none to the accordion’s content paragraphs using jQuery instead of CSS:
$(".accordion p").css("display", "none");
Here’s the result:
Since the paragraphs are styled to be hidden by jQuery, it defaults to display all content when Javascript is disabled. We now have the best of both worlds: the classy sliding jQuery animations and a fully accessible menu. Success!
For more information on jQuery and examples of it in action, check out this article on SitePoint and the second article in Cameron Moll’s 4-part series, The Highly Extensible CSS Interface.
David said,
March 19, 2008 @ 2:46 pm
One simple way to maintain degradability is to make a habit of switching classes before turning on the jQuery, f.ex:
$('ul.list_original').removeClass('list_original').addClass('list_jquery').doSomething(function() {
// jquery operations here
});
This way, you can apply as many display:none to ul.list_jquery as you like since it will not affect the original list display.