My focus in this discussion is to consider the need for basic progressive enhancement and to try to tackle a couple of scenarios using a little jQuery (the open-source JavaScript library, web builders can’t get enough of!).

The larger goal of progressive enhancement is to build accessible websites that work with or without certain capabilities (like JavaScript), while providing improved aesthetics and/or usability for more capable browsers. The need for this may arise because JavaScript is not enabled universally, so it makes sense to create a fall-back. Why on earth a user would not have JavaScript, you might wonder. Well, the reasons could vary from them using old computers to using limited devices (like mobile phones).  Also, users with visual impairments who use screen readers will not be able to use JavaScript features. Then there are those users who might simply choose to disable JavaScript in their browsers. But what good is the user who doesn’t even have JavaScript enabled in his browser, you may ask. It is true that the number is unlikely to be huge, in fact it maybe as small as 5% to 10% of the entire user base of a site. But then, why alienate 10% of possible customers? Besides, as dependable builders of the web, we should keep striving towards creating bullet-proof user experiences.

The scope of progressive enhancement is quite huge. You create a basic level of user experience that will be available to all users, and then you go on adding more sugar that will automatically be available to browsers that can handle it. You may have also heard the term graceful degradation, which is pretty much the opposite side of the same coin. Graceful degradation refers to providing an advanced user experience in more modern browsers, but it will also degrade gracefully to a working, but lower level of user experience in older browsers.

So let’s start by understanding the basics with the help of a couple of simple, practical jQuery techniques.

Scenario 1:

Say a web page requires showing a disclaimer message up front notifying users of something. For example, it may be important to warn users that the site contains adult content or requires parental guidance. Or maybe that the site has standard (not even advanced) features that are not expected to work as desired on certain pre-historic browsers *cough*internetexplorersix*cough*.

The disclaimer message is contained in a div with an id of #disclaimer. A show/hide button is needed that will toggle the disclaimer using jQuery (or in other words, when clicked on Hide, the disclaimer message will disappear and when clicked on Show, the message will be back again). However, if the button is included in the HTML, a user who doesn’t have JavaScript support will see a button that doesn’t work when clicked. This would lead to a confused user. In this scenario, it makes sense to add the toggle button using jQuery itself. I want the disclaimer to be visible to all users, and it is plain good UX design to not have the toggle button visible for users who cannot even use it.

In the HTML markup, add after the body tag :

<div id=”disclaimer”>This is a disclaimer!</div>

In the head section of the page, add the following jQuery code after you have included the jQuery library :

<script type=”text/javascript”>
$(document).ready(function() {
$(‘<input type=”button” value=”Hide Disclaimer” id=”toggleButton”>’).insertAfter(‘#disclaimer’);
$(‘#toggleButton’).click( function() {
$(‘#disclaimer’).toggle();
if($(‘#disclaimer’).is(‘:visible’)) {
$(this).val(‘Hide Disclaimer’);
} else {
$(this).val(‘Show Disclaimer’);
}
});
});
</script>

In the above code, I added an input button with the id of #toggleButton to the page using jQuery. I have used the insertAfter() function to place the button after the disclaimer div as its sibling (the div and the button are on the same level of the DOM). Note here, if you need to add the button inside the div (i.e, if you require the new element to be a child of the existing element) use the appendTo() function instead of insertAfter() .  When the #toggleButton is clicked, the #disclaimer toggles between visible and hidden states (i.e, it shows if hidden, or hides if visible) using jQuery’s toggle () function. Then there is a simple if-else logic that sets the value of the #toggleButton to ‘Hide Disclaimer’ if #disclaimer is visible or to ‘Show Disclaimer if #disclaimer is hidden. The $(this) keyword in jQuery is used to refer to the object currently selected (here it is #toggleButton, so it is perfectly okay to use #toggleButton in place of this).

Scenario 2:

It may not be always feasible due to time or budget constraints to provide working alternatives for every JavaScript feature on the page or create a fall-back for everything that isn’t supported on the chaotic Internet Explorer 6 (you know what, I just realized on the heels of an all-India strike on the first working day of the week, within days after a transport strike that choked the entire city, there are plenty other reasons to stay pissed off about – so I’ll save the IE6-bashing for sometime later!  As a good-natured netizen though, you are always encouraged to unite against it! ;-) ). So coming back to this scenario, it may be a good idea to show a message that JavaScript (or a modern browser) is recommended for the website. But a bit of jQuery is needed in this process of letting the user know that the site won’t work well without JavaScript. Sounds a tad ironic, doesn’t it?

I will add the message as a paragraph with an id of #no-script in the HTML markup itself after the body tag :

<p id=”no-script”>JavaScript is recommended!</p>

Although the message is now visible to everyone on the page now, I will use jQuery to remove it. After including the jQuery library, I will add the following script in the head section :

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#no-script’).remove();
});
</script>

This way if the user has JavaScript disabled the jQuery statements will fail to execute and the message remains. If the user has JavaScript, the message gets removed and the user gets the desired experience.

Note that there is an HTML tag called <noscript> which is meant for this very purpose. Whatever text you wrap within <noscript> and </noscript>, will be shown only when the user’s browser doesn’t have JavaScript enabled. However, it has its shortcomings.

So basic progressive enhancement can be summed up as a case where the page works fine for the 10% users lacking JavaScript or advanced capabilities, but works even better for the remaining 90%. And jQuery, as is seen, can be used to add advanced functionality (or incentive, if you will) for users who actually are in a position to view them.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark