WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: onchange javascript event in auto dropdown box

for

Number of posts in this thread: 8 (In chronological order)

From: Lee, Samson (HRSA) [C]
Date: Wed, Jul 09 2008 1:40PM
Subject: onchange javascript event in auto dropdown box
No previous message | Next message →

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?



From: ben morrison
Date: Wed, Jul 09 2008 1:50PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

On Wed, Jul 9, 2008 at 8:36 PM, Lee, Samson (HRSA) [C] < = EMAIL ADDRESS REMOVED = > wrote:
> 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?

You should build the form as normal, with multiple forms if thats what
is required.

You can use CSS and JS to hide these submit elements if you don't want
to show them, when you know that JS is enabled.

ben

--
Ben Morrison

From: Christian Heilmann
Date: Wed, Jul 09 2008 2:00PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

Lee, Samson (HRSA) [C] wrote:
> 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?
>
>
Why don't you tell us what interface you need to build (what tasks are
the users to fulfil?) then we can help you out. This sounds a lot like
you are getting bogged down in the technicalities while there might be
an easier solution?


From: Jared Smith
Date: Wed, Jul 09 2008 2:10PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

On Wed, Jul 9, 2008 at 1:36 PM, Lee, Samson (HRSA) [C] < = EMAIL ADDRESS REMOVED = > wrote:

> I just found that you can actually navigate and
> pick an item from the dropdown if you press Alt + down arrow and hit
> Enter.

The problem is that there is no indication that the user must select the
non-traditional Alt + down arrow for these types of select menus, as
opposed to simply the down arrow, which is the default behavior.

> It's probably not user friendly this way, but I guess technically
> this is still 508 compliant?

The relevant section 508 guideline states, "(n) When electronic forms
are designed to be completed on-line, the form shall allow people
using assistive technology to access the information, field elements,
and functionality required for completion and submission of the form,
including all directions and cues."

In my opinion, if there is a jump menu element that in it's default
state is not accessible, this likely fails this guideline. Now if you
provide the user with the relevant "directions and cues" - "Press Alt
+ Down Arrow" (is this consistent across browsers?) - then perhaps you
could state 508 compliance, though I'd be more concerned with
accessibility than merely compliance.

Jared Smith
WebAIM

From: Christian Heilmann
Date: Wed, Jul 09 2008 2:20PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

>
> In my opinion, if there is a jump menu element that in it's default
> state is not accessible, this likely fails this guideline. Now if you
> provide the user with the relevant "directions and cues" - "Press Alt
> + Down Arrow" (is this consistent across browsers?) - then perhaps you
> could state 508 compliance, though I'd be more concerned with
> accessibility than merely compliance.
>
>
The point is that this is just not usable. I don't have any motor
disability but I fill out forms using my keyboard and tabbing. Sending
data off on change makes me send you evil emails.
If you have to explain a way around an uncommon way of using an
interface then your interface is built in an un-intuitive way. People,
play more wii games, they got it figured out - the easier and more fun
it is to use something (using natural patterns), the more money you will
make, the more users you will get and the less complaints you'll get.

We build interfaces, not HTML code.

From: Aaron Cannon
Date: Wed, Jul 09 2008 2:30PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

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.

Aaron


-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lee, Samson (HRSA) [C]
Sent: Wednesday, July 09, 2008 2:37 PM
To: = EMAIL ADDRESS REMOVED =
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?

From: Christian Heilmann
Date: Wed, Jul 09 2008 2:40PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | Next message →

Aaron Cannon wrote:
> 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.
>
> Aaron
>

What does it do for voice recognition? you can't win the "let's guess
what people use" game as browsers are just terrible in reporting what
happened with what.


From: Lee, Samson (HRSA) [C]
Date: Wed, Jul 09 2008 3:00PM
Subject: Re: onchange javascript event in auto dropdown box
← Previous message | No next message

Thanks Jared, I think I'll go with your suggestion. I'll probably add a
keyboard detection and display the "directions and cues" so it can be
useful at the right time.

-----Original Message-----
From: Jared Smith [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Wednesday, July 09, 2008 3:52 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] onchange javascript event in auto dropdown box

On Wed, Jul 9, 2008 at 1:36 PM, Lee, Samson (HRSA) [C] < = EMAIL ADDRESS REMOVED = >
wrote:

> I just found that you can actually navigate and
> pick an item from the dropdown if you press Alt + down arrow and hit
> Enter.

The problem is that there is no indication that the user must select the
non-traditional Alt + down arrow for these types of select menus, as
opposed to simply the down arrow, which is the default behavior.

> It's probably not user friendly this way, but I guess technically
> this is still 508 compliant?

The relevant section 508 guideline states, "(n) When electronic forms
are designed to be completed on-line, the form shall allow people
using assistive technology to access the information, field elements,
and functionality required for completion and submission of the form,
including all directions and cues."

In my opinion, if there is a jump menu element that in it's default
state is not accessible, this likely fails this guideline. Now if you
provide the user with the relevant "directions and cues" - "Press Alt
+ Down Arrow" (is this consistent across browsers?) - then perhaps you
could state 508 compliance, though I'd be more concerned with
accessibility than merely compliance.

Jared Smith
WebAIM