Home arrow JavaScript arrow Easing jQuery Plug-In: Fixing Access Issues with Progressive Enhancement
JAVASCRIPT

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


In this third installment of a series, I demonstrate how the proper use of Progressive Enhancement can be of great help in increasing the accessibility of the sample navigation bar built previously. Implementing this approach means that the bar will remain completely functional even if JavaScript is disabled on the browser.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
August 04, 2010
TABLE OF CONTENTS:
  1. · Easing jQuery Plug-In: Fixing Access Issues with Progressive Enhancement
  2. · Review: the previous sample navigation bar
  3. · Using Progressive Enhancement to make the navigation bar more accessible
  4. · The revamped version of the navigation bar

print this article
SEARCH DEVARTICLES

Easing jQuery Plug-In: Fixing Access Issues with Progressive Enhancement
(Page 1 of 4 )

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!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials