WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: onchange javascript event in auto dropdown box


From: Aaron Cannon
Date: Jul 9, 2008 2:30PM

A coworker and I recently devised a way to make a slightly more accessible version of the onchange dropdown navigation box. Basically, using javascript, we determine whether they are using their mouse or the keyboard to select each item in the list. If they used the mouse, it works as usual, immediately taking them to the selected page. If however the selection was made by the keyboard, we display a spinner and delay x number of seconds. If the user doesn't make another selection within that time, they are taken to the page they selected. If they do, the clock is restarted.

Clearly this solution is not perfect, and you would be better off avoiding the problem entirely, but it does make things a little better in my view, though I would be very interested in hearing everyone's thoughts.


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Lee, Samson (HRSA) [C]
Sent: Wednesday, July 09, 2008 2:37 PM
Subject: [WebAIM] onchange javascript event in auto dropdown box

On this WebAIM's article -
http://webaim.org/techniques/javascript/eventhandlers.php#onchange - the
"bad" (inaccessible) dropdown box in the onchange javascript event
example is not accessible because it works with a mouse only. This is
what I thought, too, but I just found that you can actually navigate and
pick an item from the dropdown if you press Alt + down arrow and hit
Enter. It's probably not user friendly this way, but I guess technically
this is still 508 compliant? I think it should be avoided as much as
possible, but when you have limited screen real estates with multiple
dropdown boxes, I don't want to add multiple "Go" buttons. In this kind
of scenario, I guess I can have the dropdown boxes without the
buttons... am I right on this, or are there any other things that I
should consider?