Easing jQuery Plug-In: Fixing Access Issues with Progressive Enhancement

In case the name doesn’t ring any bells for you, let me point you quickly in the right direction: the Easing plug-in is a useful jQuery extension that allows you to expand the range of easing effects that can be used with the library’s “animate()” method. Needless to say, the plug-in can be utilized in multiple and varied scenarios to animate different web page elements in a truly unobtrusive way.

It’s fair to stress, however, that one typical case where the plug-in yields impressive results is in the construction of animated -- yet accessible -- user interfaces. Obviously, this includes the omnipresent navigation bars. To demonstrate how simple it is to create a bar like this by using the functionality of Easing, in the two previous parts of this series I showed how to accomplish this in a step-by-step fashion, starting with the definition of the bar’s markup and visual presentation, and then implementing the animated behavior of its subsections.

At this point, I could take a deep breath, relax and congratulate myself for building such a cool navigation bar! Well, unfortunately, things are not that simple, since the current version of the bar won’t display its subsections if JavaScript is disabled on the browser. That’s not the desired result, especially in terms of accessibility, right?

The good news is that this issue can be fixed quickly, thanks to the use of Progressive Enhancement. Simply put, the implementation of this methodology will permit you to build an enhanced (read: animated) version of the links bar via the plug-in. But even if scripting is turned off, the bar will remain entirely functional, of course without all of its bells and whistles.

So, are you ready to learn the full details of this redesign process? Then begin reading right now!