Multiple JavaScript event handlers

By bim

A classic example of trying too hard and making accessibility bloopers, can be found when web authors provide too many JavaScript event handlers in an effort to ensure device independence. This is the fifth in our series of articles on "too much accessibility".

Ensuring that users can make JavaScript events work, regardless of the way that they access your web page is vital. Users should be able to activate JavaScript events whether they use a mouse, keyboard, pointing / switch device or any other means of navigation. However, if two or more event handlers, designed to perform the same task are used, the effect can be the opposite of the one you intended. The most common problem is where onClick is used, and authors, believing that this is a mouse dependent event handler, will add an onKeypress, or similar to make sure that keyboard and switch users aren't left out. The problem here is caused by the belief that onClick is always mouse dependent. If the event is attached to a link or form control, onClick is device independent. In Internet Explorer there is no effect when onClick and onKeypress are used together; the second handler is ignored. No surprise there then. However in Mozzilla Firefox and Opera, the web author is taken at his word, and using onClick with onKeypress will activate the link or button, when all the user is trying to do is navigate over and passed it.. This kindly meant, but flawed technique has been seen in the wild, on a search button, which was preceded only by a link to the home page and the search input field. This meant that if navigating by using the [tab] key, there were only two pages available, Home and Search Results. The intrepid user could, of course, hold down the [shift] key while tabbing, which reverses the tab order, but would you walk backwards into a shop?