Web Usability & Website Optimization

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

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.


Post a Comment

<< Home