Web Usability & Website Optimization

Web Usability and SEO
A blog on » Web Usability   » Website Accessibility   » Search Engine Optimization (SEO)

Wednesday, September 26, 2007

jQuery

It is cool and amazing. jQuery is a light weight JavaScript library that does some awesome jobs in event handling, animation and Ajax interactions on a HTML file. They call it "The Write Less, Do More" JavaScript library which can do wonders if at all you are bothered about code optimization and adding some cool effects to your webpage. It is little complex but small and very powerful, lets take a look at following code:

$(document).ready(function() {
$("#Jmenu ul").hide();
$("#Jmenu li").filter("[ul]").hover(
function(){$(this).children("ul").show("slow");},
function(){$(this).children("ul").hide("slow"); });
});
The first line gets it ready for the Action. The second line searches for ul structures inside the parent ul with id=Jmenu and hides em all. The third line is the mouse over function on parent li nodes. The fourth line finds out if the mouse hovered li has child elements (ul) and if it has then shows them slowly (cool show effect) and the fifth line hides these elements again on mouse out. Don't forget to add jquery.js file in your html file, it can be found on their site. Now if I had to write the same code using typical JavaScript it would be hundreds of lines of code to get the same effect. That was just a small example of what jQuery can do, needless to say it can do many wonderful things that you might not have thought JavaScript can do.
jQuery programmers and enthusiasts have come up with lot of Plugins and the repository can be found at: http://jquery.com/plugins/
jQuery is happening and big thing, if you are a UI programmer, get acquainted with it, you will love it.

Sunday, September 23, 2007

Accessible DHTML menus (with Keyboard support)

I am a fan of DHTML menus. Dropdown menus like suckerfish as discussed on alistapart adds great value to the page. They are not typical javascript menus but HTML and CSS based menus that works on all modern browsers and with small javascript they will work on older versions too. And yes if you disable the CSS they will still work because of ul-li structure in HTML which will still show the links on the HTML page.
Good on Accessibility part, right? but hold on here, despite so many claims of these type of menus being highly accessible, they are NOT and two most accessibility disadvantages of them are:
1. Disable Javascript alone and they won't work in IE6.0 and below and may be other older browsers too.
2. These menus lack keyboard support, very important for users with mobility problems and those who really don't bother to use mouse, I am sure many are there, atleast in IT industry.

If we forget first problem and assume users will use modern browsers, we still have to solve the second one and give user freedom to use keyboard for navigation. jQuery is the solution I found for this problem. We will discuss more about jQuery and how powerful it is in next post. FatFish from pfirsichmelba is one such example for DHTML menus with jQuery that adds support for keyboard and here is the demo http://pfirsichmelba.de/artikel-scripts/dropdown/horizontal.html
So next time you are building a accessible menu using DHTML don't forget to add keyboard support.